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!
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?
Dennis's avatar
The Rad Cactus logo
@Julian Fella There are a few plugins in after effects to make animation curves easier ๐Ÿ˜‹
Julian's avatar
@Dennis fair point ๐Ÿ˜…
Daniel G's avatar
BrightStudios logo
@Julian Fella thatโ€™s nice!
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!
Julian's avatar
@Jerry Rodriguez thanks man! ๐Ÿค๐Ÿป
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...
Julian's avatar
@Angelina Stefanova thanks Angelina! ๐Ÿค๐Ÿป
Dani's avatar
@Julian Fella Love these visuals.
Julian's avatar
@Dani Evstratenko thanks Dani ๐Ÿ™Œ๐Ÿป
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...
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