GSAP Easing Curves Guide: Enhance Motion Paths SeamlesslyGSAP Easing Curves Guide: Enhance Motion Paths Seamlessly
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
Here’s a visual of my go-to (GSAP) easing curves. Plus, I built a function to map attributes (e.g., anm-ease=power4.inOut) into motion paths.
Why? I suck at After Effects. Win-win!
Dennis's avatar
The Rad Cactus logo
@Julian Fella There are a few plugins in after effects to make animation curves easier 😋
Jorge's avatar
Twyne logo
@Julian Fella This is a great visual reminder, you just gave me a great idea!
Julian's avatar
@Jorge Zamora Happy to inspire 🤝🏻
Jerry's avatar
@Julian Fella Love the presentation layout!
Muhammad's avatar
@Julian Fella These visual gives clear vision. But let's see how the Webflow will show when they release the new interaction system with GSAP.
Brian's avatar
AHXE LABS logo
@Julian Fella lovely animations!
Mateusz's avatar
I’d love to see those visual reminders integrated into the Webflow interaction panel when selecting an easing setting. 😊
Julian's avatar
@Mateusz Szymkowicz yeah right? Would be much clearer, mostly for people just starting out.
Habib's avatar
Timeahead logo
@Julian Fella GSAP is great I have done many animations using GSAP, D3.js or ploty or similar libraries but I do mostly custom designs on engineering heavy projects.
The's avatar
@Julian Fella amazing. I'm inspired and learning too.
Chavi's avatar
Brands by Chavi logo
@Julian Fella love how clear this is! 🙌
Julian's avatar
@Brands by Chavi Glad you like it 🤝🏻
Psalm's avatar
@Julian Fella There are a few plugins in after effects to make animation curves easier
Harshit's avatar
@Julian Fella That’s awesome! GSAP’s easing curves are a game-changer for smooth, natural motion, and mapping attributes directly into motion paths is a brilliant way to streamline animation. Sounds like you’ve built yourself a powerful workflow—no After Effects required! Are you using this...
Dani's avatar
@Julian Fella Love these visuals.
Audun's avatar
@Julian Fella Nice! These look like my synthesis curves xD The sound that goes with a curve like that on say i.e. a nice flowy pad is amazing!
Julian's avatar
@Audun Moseng UHHHHH that sounds super dope! You don't by any chance have a demo to listen to them? 👀
Audun's avatar
@Julian Fella I don't have a demo made specifically for these, no, but I got plenty of these sounds laying around! I'll select a few nice pads etc. today, and post a link later if you wanna give it a listen :D
Audun's avatar
@Julian Fella Made you a short video instead so you get the gist of how things are made. I didn't really add much different sounds or anything, because touchpoints are so different, and pretty much all of the ones I have made I got NDA's for😂 But give the video a look, and then if you got...
Waqas's avatar
@Julian Fella At first I was also very hesitant to learn it but now it's fun. I was wondering,Where do you get resources if you wanna make SaaS UI animations?
Maryam's avatar
@Julian Fella Who needs After Effects when you’ve got big-brain GSAP moves? This is like DIY animation magic!
The's avatar
@Julian Fella how long (in days) did this took?
Julio's avatar
Aragoza logo
@Julian Fella very helpful! , thanks!
Ajeya's avatar
Feels like a cheat code for anyone who doesn’t want to dive into After Effects pain 😂 @Julian Fella
Back to feed
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