Learn Framer Scroll Animations in 13 Minutes

In this Framer tutorial, you'll learn the easiest scroll animation technique that you can start using in Framer without any coding knowledge. Follow along and I'll show you how sticky positioning work and how to trigger scroll effects with scroll sections. After following along this video, you’ll have the knowledge that is needed to create the most amazing scroll animations on your websites (without any code!).

00:00 - Intro
00:24 - The roadmap
00:47 - The technique
01:41 - Sticky positioning setup
04:39 - Scroll triggers
06:07 - Scroll transform
08:53 - Scroll variants
12:00 - Recap
12:35 - Additional resources

Follow me on:

[timilehinsolu]

I’ve never seen someone so happy to talk about scroll animations 😆

[AmjadKhan-rznu]

Trust me framer is gonna change the world for web designers, we will be called interface engineers more 🎉🎉🎉🎉

[estone]

I really, really, appreciate your videos. You are a great teacher and I appreciate you sharing your knowledge. I'm glad I found you and subscribed to your channel. Thank you.

[michaelbruzzese]

Incredible job as always Nandi, a lot of value, and everything seems so easy to understand when you show it step-by-step! 💪 (Love the new setup!)

[hoanghantlz]

Wow you made it really easy to understand. I feel so lucky I've found your channel. Appreciate your great videos 💯

[ashhad.khan]

This timeline technique is super awesome. saved ton of my times (Y)

[ProNoobDev]

oh this is what i was looking for ! thank you so much

[simplefolding]

Thank you, the tutorial is very clear

[Shafranlive]

My eyes are on your new Mac Studio Setup 😅❤✨

[rachsarra]

Would it be possible to have a scroll animation for each scroll variant, or only for scroll transforms? I'm trying to do a simple fade instead of transforming the variant into another, but it only works between the 1st and 2nd variation

[jordanwagner]

If I wanted to use an image taller than the coin what adjustments would I need to make to have this display on tablet and mobile without cutting the image off?

[delphinemansour]

Great video! I added a 5th section to the container by duplicating section 4 and the trigger frame, renaming them accordingly. However, the coin animation stops at section 4 and doesn't play in the new section. How can I fix this?

[TanyaMalka]

Hi Nandi, I used your smooth scroll component in my site and it works on desktop but not mobile, is this because mobile already has smooth scrolling natively? how can I implement the effect I see on desktop in mobile browsers?

[gorickego]

A question: is it possible to create a frame with this type of scroll animation/ADV that goes transparent over an existing html? 🙏

[mahdiehghaffar]

This scroll animation isn’t responsive on mobile and tablet views because its overflow is set to visible. Do you have any suggestions to fix it

[shuoEnva]

Why is the text disappearing effect different on phones and tablets compared to computers? How can it be modified to be consistent with computers?

[HarryBanner-wp]

Hi... Can you make a video on an Animated circle progress bar

[panicdispenser]

why you cant use the x or y position of main section for the scroll animation? why using this 0% opacity sections instead?

[nousuyadagiri]

Can we export framer design into code ??🤔

[DavidMartens]

Hey! im learning Framer right now. How could I trigger a video? As the user scroll it progresses through the video
CHEERS!