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!
Brian's avatar
AHXE LABS logo
@Julian Fella lovely animations!
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.
Mateo'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