Create Automated Easing Graphs for Motion Systems Effortlessly

Create Automated Easing Graphs for Motion Systems EffortlesslyCreate Automated Easing Graphs for Motion Systems Effortlessly

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Nicholas Cosentino

• Feb 10

So, I've been working on a motion system recently. I wanted to create a fully automated easing graph. It took a bunch of trial and error but I was able to figure it out. Now I can animate the bezier handles on screen and the path travel will mimic the easing. Then of course I had to apply it to my favorite winter olympic sport.

Graphic Design Animation Motion Design JavaScript motion motiongraphics Cavalry motiondesign

Adonis Demetriou

• Feb 10

wonderful!

Juan Llerena

pro

• Feb 11

This is such a smart exploration, automating the easing graph and visually animating the bezier handles makes the relationship between motion and timing so much clearer, and applying it to a real world scenario makes it even more satisfying to watch.

Nicholas Cosentino

• Feb 11

Thanks Juan! I’m so happy it resonated with you. I really wanted to illustrate speed and easing without having to manually adjust the graph.

Vaibhav Khulbe

pro

• Feb 24

Motion for React frontend effect

A beautiful stagger effect made with Motion. Turns out, if you can calculate the incremental `delay` values per letter with code, you can stare at this effect for hours 🤩 Which one of the two vibes the best with you?

64 voted

41%