I have 4 core tools I use for every website build
- initial design & layout
2. @Adobe After Effects
- vector animations
- after effects plugin
- site builder
Here is how I swing the hammer ...
Most elements including the header on the page are a combination of ...
Combining these elements in harmony results in razor sharp animated web experiences and stellar site speed.
However some elements are 100% Lottie animations like this.
But this is NOT a
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
If you want to fully wrap your head around these - Webflow has a "University" chapter dedicated to it.
Finally, this before/after slider is very simple. I used a pre-built element from @Flowbase
here is a link to clone the element for yourself.
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.