Animation
Tedy Website Scroll Animation in Framer
This is a scroll animation created in Framer based on the amazing Tedy website. What's quite impressive is that I didn't have to write a single line of code to achieve this animation on my website. Fully no-code. Feel free to remix the project to see how something like this is built in Framer.
Created by
About the resource
Creating these types of scroll animations in Framer requires using some of its greatest features:
Sticky positioning
Scroll transforms
Scroll sections
When we combine these features well, we can create almost any scroll animation on our websites.
In fact, I posted a YouTube tutorial a while ago where I show step-by-step how to create scroll animations with this technique.
The technique
Essentially, what we do is keep a sticky positioned frame in the viewport as we scroll down on the website, and we animate the objects within this sticky positioned frame.
But how?
Well, we utilize trigger frames and scroll sections to trigger scroll transforms on those elements.
Because what happens is that, as our sticky positioned frame stays in the center of the viewport, other sections of the website—such as hidden trigger frames—are scrolling away. If we apply scroll sections to these trigger frames and use these scroll sections for triggers in our scroll animations, we're basically all set and we can do anything we want.
About the resource
Creating these types of scroll animations in Framer requires using some of its greatest features:
Sticky positioning
Scroll transforms
Scroll sections
When we combine these features well, we can create almost any scroll animation on our websites.
In fact, I posted a YouTube tutorial a while ago where I show step-by-step how to create scroll animations with this technique.
The technique
Essentially, what we do is keep a sticky positioned frame in the viewport as we scroll down on the website, and we animate the objects within this sticky positioned frame.
But how?
Well, we utilize trigger frames and scroll sections to trigger scroll transforms on those elements.
Because what happens is that, as our sticky positioned frame stays in the center of the viewport, other sections of the website—such as hidden trigger frames—are scrolling away. If we apply scroll sections to these trigger frames and use these scroll sections for triggers in our scroll animations, we're basically all set and we can do anything we want.
About the resource
Creating these types of scroll animations in Framer requires using some of its greatest features:
Sticky positioning
Scroll transforms
Scroll sections
When we combine these features well, we can create almost any scroll animation on our websites.
In fact, I posted a YouTube tutorial a while ago where I show step-by-step how to create scroll animations with this technique.
The technique
Essentially, what we do is keep a sticky positioned frame in the viewport as we scroll down on the website, and we animate the objects within this sticky positioned frame.
But how?
Well, we utilize trigger frames and scroll sections to trigger scroll transforms on those elements.
Because what happens is that, as our sticky positioned frame stays in the center of the viewport, other sections of the website—such as hidden trigger frames—are scrolling away. If we apply scroll sections to these trigger frames and use these scroll sections for triggers in our scroll animations, we're basically all set and we can do anything we want.
