Create APPLE’s SCROLL EFFECT in Webflow using Lottie Files and After Effects!

[@azamburru]

This tutorial is incredibly well done! It's simple, effective, and gets straight to the point. Each step is clearly explained along with the reasoning behind it. Great job!

[@MátéTihanyi]

YOU'RE A GOD SIR!!! THANK YOU!!!

[@Infoatcanersoez]

Sir, you are a legend. Thank you for your time.

[@thejamesnewman]

Thanks for this. Exactly what I was looking for.

[@moisescarmona5718]

you are the best thank you!!!! i was searching for it

[@miracleistrust]

Wow This is exactly What I want to try!! Thank you so much!!

[@user-lw1ex2oo8p]

Bro, This is super lovely. I spend almost two days breaking my head this video solved most of the problems i was having with lottie. Thank you brother'

[@fabianbrandt6138]

Oh my gooooood! Thank you so much!!!! you helped me so hard! Thumbs up, Subcribtion done!

[@GermanLazarev]

Thanks bro

[@ronnyt5914]

thanks dude

[@ashokreddy41]

so much useful tutorial for me thank you chethan

[@uxalok]

This is amazing ❤

[@frictiongraphics116]

Nice and useful toturial 🙏🏻😀❤️

[@aryanagrawal1011]

legend

[@ZEB005]

ありがとう！

[@OrlieJohn]

can you make the lottie animation as a background and scale down the frame?

[@arturbobinski2287]

Awesome Video, thank you! Any chance you have a tutorial how to do this not using Webflow but rather a normal HTML/CSS style build site like WP or similar?

[@DesignPilot]

Nope I’m not aware

[@arturbobinski2287]

@@DesignPilot got it, thank you. I've been running into an issue with this however, keep rendering and it gets to 100% after all images but then errors with out of memory, line 88. Did you ever experience this or know whats wrong?

[@DesignPilot]

@arturbobinski2287 not sure

[@miracleistrust]

Can you show us how design cool website putting some texts like you? You design skill is cool I don't know where should I put my text on site to be looked cool.

[@learncode5110]

Hey Hi Chetan! awesome tut just loved your explanation and finally learned the apple scroll was much grateful, I just wanted to know how to animate the text effect as you have done in after effect have you teach such text animation in lottie course? coz that text effect is super dope!

[@VandrapMedia]

Would love to see how you did the text animation too! Can you share the AE File or could you create a tutorial?

[@DesignPilot]

@VandrapMedia It’s a simple fade effect with layer masks. Nothing fancy at all

[@learncode5110]

thanks@@DesignPilot

[@spencerholm7713]

When I try to export from lottie my animation is all white. It doesn't look this way in after effects, any tips?

[@samuelnzekwe7696]

can i do this with just images ? like, I have about 3 images, and I want them to look differently as the user scrolls within that section.

[@DesignPilot]

This method won’t work. The tutorial shows the method on user scroll. You can do it natively in Webflow using a scroll interaction.

[@samuelnzekwe7696]

@@DesignPilot Thank you for your response. i am currently battling with a project where I have about 8 images that I need to make them appear differently as the user scrolls within that same section. All the images are flexed horizontally and need to take their colored forms as a user scrolls.. So, its advisable I ask for a lotti animation of the whole set up right?

[@stuart2151]

Is there a way to make this sticky eg 2 columns, one with the animation on the left and the text changing on the right. So they both change when the user scrolls? Thanks

[@DesignPilot]

Yea

[@markogrle8657]

Thx for explanation! I have question regarding file size and loading time of the website. I tried to export 60 frames of animation from C4D and put it in the after effect, export everything like you said with transparent background, but size of json file was 35MB and this cannot be uploaded the webflow. Resolution was 1920x1080px. What do you think what is the best way to do it, because Apple is doing even longer with more frames and still is working fine?! 😄

[@DesignPilot]

I would say reduce the fps to 24 or 30 and the resolution as well. Apple does things a bit differently so they are able to make it work.

[@smooothslice]

🔥

[@another.designer]

Loved this tutorial. I Have a question. What should be maximum duration & FPS of a video/animation to use for lottie? Because a video of 60FPS will take more render time, bigger file size and more CPU than a video of 30FPS.

[@DesignPilot]

There is no max duration or FPS. Whatever is a comfortable file size.

[@TiagoRosa]

not sure why you put the 500vh. I believe in webflow when you add the Lottie and create the scrolls animation, you have to do nothing else. right? ;) great content, btw!

[@DesignPilot]

If you want to trigger the animation AS YOU SCROLL, you need to have enough amount of scroll area. A Lottie basically a div and just plays the animation even if you don’t scroll.

[@TiagoRosa]

@@DesignPilot you're right! my bad hahahaha did it here, was coming back to comment, but you were faster! cheers! :)

[@Oday_tone]

It doesn't create a proper lottifile, and when I try to render it, all I get is an incredibly broken example picture. How do I fix this?

[@DesignPilot]

Try with a few small images and probably 1080p resolution

[@Oday_tone]

@@DesignPilot Thank you for your quick reply, your tutorials are a real treat for me. I think it's because in your other lottiefile tutorials you unchecked the option to include images and render them, so when I followed that, I experienced the image breakage. I'm currently testing with 960*540 resolution. If it works, I'll try again at 1080p. Thanks!

[@Oday_tone]

@@DesignPilot I think it's coming to the end of the render and idling... Do you have any tips or tutorials on how to make things smoother when it comes to making an imagesequence into a lottiefile? I mean, like a tutorial to optimize it.

[@DesignPilot]

@Oday_tone Not sure. You can reach out to the LottieFiles team and raise an issue

[@Oday_tone]

@@DesignPilot Now I realize that with just 40 image sequences, the lottiefile is eating up 50% of my Ram and becoming unresponsive at the end of the render... Does this happen often? It's only 40 images at 1080p.

[@playpiano2264]

Hi Chetan, Is it possible to make the exact thing on rive and made it on framer?

[@DesignPilot]

Nope

[@sykowhite9465]

why does scroll animation play when scrolling backwards.... i want it to play only once..

[@DesignPilot]

It won’t work like that

[@sykowhite9465]

@@DesignPilot ye just checked both samsungs' and apples scroll animation and they play backwards as well, ig thats ok 🤔

[@adnanmehedii]

Why don't you create webflow animation course? I would be very helpful.

[@DesignPilot]

There are plenty of tutorials already

[@erasus7388]

Did everything the way you did it but my render freezes at 100%. I thought it was still rendering so i waited 2 hours but nothing happens. Anyone else getting that problem?

[@mcaniolan3874]

Hi Chetan, Can you build a website for me?