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

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

Design Pilot 116K subscribers
28.3K views · 2023-01-30 Motion DesignUI Design
🚀 Book 1:1 Tutoring Sessions with me and take your Product Design journey to the next level: https://www.learnproduct.design/sessions

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: https://www.youtube.com/playlist?list=PLERed4ILxkJ2o6OCrmlnONv8TaR_HKViE

🚀 Get 2 free months of Skillshare Premium & watch my design course for free: https://skl.sh/2TVhf8z

🚀 Create an account on Mobbin for free:
https://mobbin.com/?referrer_workspace_id=84595d96-a462-44f4-a3d2-c34148889947

🔸 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:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1_kDOXCrEGmB58IsLOiIc3

Webflow Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1N4PxzGE_ywogtBeeOaqc8

Photoshop Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ372RTmi1rQmfqbIqXr3opi

Illustrator Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ0pK595gwPLmcVF-P_jx0V1

After Effects Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ23p3SZD49unrbkh_F8q9Dk

UI Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1uHAE-_rAxeDMBnhzzmYuW

Design Resources, Tools and Softwares:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1-qY3TQToZWn3vYWVo6EA9

Adobe XD CC Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ11D_9_jX80GDenpMUWjTtv

eSports Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ3lLdkQmG-Ebw90KdChq56P
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: https://chethankvs.design
Twitter: https://twitter.com/kvschethan
Instagram: https://instagram.com/design_pilot
Mail: designpilot21@gmail.com
Behance: https://behance.net/chethankvs
Dribbble: https://dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#apple #webflow #lottiefiles
#webflow tutorial#webflow scroll#scroll effect#webflow for beginners#apple webflow#webflow apple website#webflow apple animation#webflow apple clone#webflow lottie animation on scroll#webflow lottie animation background#webflow lottie animations#webflow lottie scroll#webflow lottiefiles#webflow lottie integration#webflow lottie examples