I have 4 core tools I use for every website build 1. @Figma - initial design & layout 2. @Adobe After Effects - vector animations 3. @LottieFiles - after effects plugin 4. @Webflow - site builder Here is how I swing the hammer ...
However some elements are 100% Lottie animations like this. But this is NOT a GIF MP4 Lottie's are .json files and were first engineered by the @Airbnb Design team. They ROCK!
I build my Lottie animations in @Adobe After Effects and use the @LottieFiles plugin to export them as .json files for Webflow. To avoid errors make sure you ... Build graphics using AE shapes Dont use png's or mp4s in your timeline Don't use the "effects" tab in AE
For anything that uses 3D perspective or depth, I stick to using native CSS transformation properties.
Animations locked to the users scroll position leverage @Webflow interactions. If you want to fully wrap your head around these - Webflow has a "University" chapter dedicated to it. university.webflow.com/courses/intera…
That's a wrap! Check out the page and get yourself a Finance platform build for eCommerce. Big thanks to @Aj Orbach🐳 & @Richard Komaiko for helping with this project. Along with the entire team for building a killer product. triplewhale.com/finhub