Lottie animation on scroll in Webflow

Thank you so much for checking out my tutorial! Please subscribe for more design tutorials - I’ll be covering Animation with After Effects, HTML email design with XD, HTML email code with Sublime Text, Web Design with Adobe XD, Sketch & Figma as well as Web Development with Webflow. In this video we work in Illustrator, After Effects and Webflow to recreate the two scroll animations seen in Rosie Hearne’s website (bottom left) - https://www.rosiehearne.com/ Links discussed in video: Try Webflow for yourself: https://webflow.com/?rfsn=4838125.2e00a4&utm_medium=affiliate Animation Composer from Mr Horse: https://misterhorse.tv/animation-composer Overlord from Battle Axe: https://www.battleaxe.co/overlord Bodymovin: https://aescripts.com/bodymovin/ Timestamps: 0:42 - Splitting the layers in Illustrator 1:56 - Setting up the After Effects composition 2:30 - Lottie animation explained 5:00 - Importing layers to After Effects 5:36 - Converting Illustrator layers to After Effects shape layers 6:33 - Animating the logo 11:32 - Exporting the .json file with Bodymovin 12:32 - New project in Webflow 13:08 - Adding dummy content so we have something to scroll 15:17 - Adding the lottie animation container and styling 18:10 - Adding a scroll interaction with Webflow 19:49 - Adding the progress bar animation Follow me: Website: https://www.tompiggott.co.uk/ Newsletter: https://www.tompiggott.co.uk/contact#newsletter Instagram: https://www.instagram.com/tompiggottdesign/ Facebook: https://www.facebook.com/tompiggottdesign/ Dribbble: https://dribbble.com/tompiggott/ LinkedIn: https://linkedin.com/in/tompiggottdesign/ Music: “Still Standing” by Anno Domini Beats