Dynamic Bézier Curves

Nice writeup by Josh Comeau on how he created the on-scroll-animated bézier curve on his website

Did you notice that as you started scrolling on this page, the Bézier curves that border the green title hero thingy started flattening? Keep your eye on the swoopy curves just above the post text as you scroll through the top of the document. Notice how they become flat as they approach the header at the top of the viewport?

In a delightful bit of serendipity, I realized while building the blog that this feature would make a great first blog post!

Love the interactive examples embedded into the post. They really help convey the message.

Dynamic Bézier Curves →

bezier-easing – cubic-bezier implementation for your JavaScript animation easings

bezier-easing

bezier-easing provides Cubic Bezier Curve easing which generalizes easing functions (ease-in, ease-out, ease-in-out, …any other custom curve) exactly like in CSS Transitions.

Pass in the 4 points of the bezier curve of your liking – just like you’d use when defining a CSS Transition Timing Function using cubic-bezier() – and then project x, ranging from 0 to 1 (0% – 100%), in it.

var easing = BezierEasing(0, 0, 1, 0.5);
console.log(easing(0.0)); // 0.0
console.log(easing(0.5)); // 0.3125
console.log(easing(1.0)); // 1.0

Installation possible via npm:

npm install bezier-easing

bezier-easing
bezier-easing Examples →