Framer Scroll Animations For Beginners

Scroll animations in Framer are much less complex than you think, even if you're a beginner.

Timecodes
0:00 - Introduction
0:18 - Setting up the initial layout; option to access finished working file.
0:28 - Creating a frame with specific dimensions and properties.
0:45 - Designing a text field titled "scroll animation".
1:00 - Adding an image frame with certain effects.
1:23 - Creating the scroll container and setting it up.
1:50 - Introducing the text container and modifying text fields within.
2:28 - Adjusting the layout and direction of the text containers.
2:52 - Finalizing the look of the text fields.
2:59 - Adding and arranging icons within a frame.
3:38 - Creating a component with variants, changing icon positions.
4:01 - Adjusting component settings and alignments within scroll container.
4:14 - Applying color adjustments and ensuring layout properties.
4:34 - Beginning animation: introducing the scroll speed animation.
5:02 - Introducing scroll animations for text fields.
5:25 - Setting up scroll animations for specific sections.
6:58 - Introducing the scroll transform for dynamic growth effect on text.
8:06 - Introducing the scroll variants to swap component variants while scrolling.

#framer #framertutorial

[hfromero]

Hi there nice tutorial. Which Framer version are you using? I'm working using the last version but for some reason I can't see the style > blending for the circle image :(

[roulaal]

Brilliant! Thanks for keeping it short and simple. I tried these animations and looked amazing.

[dotpenji]

Wow, this tutorial is incredibly comprehensive! You've done a fantastic job breaking down the process of creating animations in Framer. I particularly liked how you demonstrated various animation techniques, like scroll speed, scroll animations, scroll transforms, and scroll variants. It's impressive how you made each step easy to follow. Thanks for sharing this and keep up the awesome content! 🙌

[artekald]

This was the gateway to making interactive websites for me, thank you so much!

[puseletsomaraba]

Thank you for the quality content, most appreciated, and it helps a lot in my work

[ozanoz]

Great tutorial Tim! Thanks for sharing.

[josetrave]

This is outstanding work. Really nice communicated too.

[jackieqiu]

Thank you so much for teaching us this!!

[OASISDispatch]

This actually helped me a lot thank u so much

[khalidYam]

0:40 why I can not make it fill on my framer, please help

[murtitjahya]

Thank you, this is very interesting. And have changed to dark mode, the results are very nice. Next, how to enter each icon only changes the appearance on the phone, does not change the appearance on desktop and mobile.

[si_isonyt]

Great tutorial... I want the box to be below the text and not beside as shown in the video, how do I make that happen ?

[antonycarrington]

How did you get the original image to go into the shape of the text? This is a great tutorial!

[FloNocode]

Hi tim ! congratulation for your content ! i love replicate your tutorial and adapt to my needs. Recently i see in framer community, a builder create an dark/Light mode directly on framer with component. But the problem is that his explanation are so hard to understand for replicate step by step. I don't know if you can make an tutorial more simple who explain how create an dark/light mode directly on framer. Thanks for your time

[DenaMurr-yf]

Im following the steps to the T to create the cool rainbow effect in the Scroll Animation text. However, I dont get a dropdown menu called "Blending". Am I missing something? thanks

[tanay_sankhe]

Hey Tim, great video. I was looking for something like this. Thanks for posting :) Just one question though. How can we make the sticky section responsive for mobile (as in the images/icons will stick upon vertical scrolling)?

[brightbaiden]

I can't find the resources you used or the finished work. when I click on the remix button, a blank page just pops up and nothing else. please help

[dewhammer]

Awesome!

How does this translate to mobile devices?

[zoya_k]

Is this possible with figma protoyping??

[afri]

Is there a way, to make it go from "Geto connected" to "Get inspired" by only one scroll? So you dont have the possibility to scroll by your own but it automatically scrolls to the next frame you want it to be at.