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

🚀 The Ultimate Guide to Become a Product Designer: learnproduct.design
In this Webflow Tutorial, using Lottie Files and After Effects, I will show you how to create an Apple Styled scroll effect. This is a very common pattern seen in Apple's product websites.
🔗 LottieFiles Playlist: • The LottieFiles Course...
🚀 Get 2 free months of Skillshare Premium & watch my design course for free: skl.sh/2TVhf8z
🚀 Create an account on Mobbin for free:
mobbin.com/?referrer_workspac...
🔸 Chapters
00:00 Introduction
00:31 3 examples of the scroll effect
02:36 Exporting as a PNG Sequence
05:01 Exporting as a Lottie File
08:55 How the effect works
12:43 Creating the Effect in Webflow
--------------------------------------­---
Mega Product Design Course for Beginners:
• The Mega Product Desig...
Webflow Course for Beginners:
• Webflow Course for Beg...
Photoshop Tutorials:
• Photoshop CC Tutorials
Illustrator Tutorials:
• Illustrator CC Tutorials
After Effects Tutorials:
• After Effects CC Tutor...
UI Design Tutorials:
• UI Animation/Interacti...
Design Resources, Tools and Softwares:
• Design Resources, Tool...
Adobe XD CC Tutorials:
• Adobe XD CC Tutorials
eSports Design Tutorials:
• eSports Design Tutorials
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: chethankvs.design
Twitter: / kvschethan
Instagram: / design_pilot
Mail: [e-mail]
Behance: behance.net/chethankvs
Dribbble: dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#apple #webflow #lottiefiles

[@ronnyt5914]

thanks dude

[@hiddenheartbehindhurtfulwords]

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

[@Infoatcanersoez]

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

[@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'

[@thejamesnewman]

Thanks for this. Exactly what I was looking for.

[@OrlieJohn]

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

[@moisescarmona5718]

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

[@uxalok]

This is amazing ❤

[@ZEB005]

ありがとう！

[@frictiongraphics116]

Nice and useful toturial 🙏🏻😀❤️

[@fabianbrandt6138]

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

[@aryanagrawal1011]

legend

[@hiddenheartbehindhurtfulwords]

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.

[@theftwelve]

🔥

[@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.

[@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

[@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

[@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.

[@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

[@playpiano2264]

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

[@DesignPilot]

Nope

[@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! :)

[@ashokreddy41]

so much useful tutorial for me thank you chethan

[@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?

[@adnanmehedii]

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

[@DesignPilot]

There are plenty of tutorials already

[@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 🤔

[@mcaniolan3874]

Hi Chetan, Can you build a website for me?

[@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.