New
New
New
Guide
- Effects
- Scroll animation
Guide
- Effects
- Scroll animation
Guide
- Effects
- Scroll animation
How to Create Any Scroll Animation in Framer
I'll teach you how to create crazy 3D scroll animations using Framer's no-code capabilities. It's unbelievable that we can do this without any code. No more boring websites.
Posted by
Nandi
Table of contents
Getting started
I remember having to learn HTML and CSS, just so I could create some really boring websites. Fast forward to now, with Framer I’m recreating some of the craziest 3D scroll animations.
I’ll be walking through an example step-by-step so you can see my process.
It’s a simple but powerful method that unlocks any scroll animation you can imagine. It’ll help you to create jaw-dropping scroll animations in Framer.
Let’s dive in:
Practice with recreations
Before you start from scratch, it’s super helpful to practice by recreating animations you love.
Here’s where to find inspiration:
Pick an animation you like and try to reverse-engineer it. This way, you’ll quickly understand how everything fits together.
Getting started
I remember having to learn HTML and CSS, just so I could create some really boring websites. Fast forward to now, with Framer I’m recreating some of the craziest 3D scroll animations.
I’ll be walking through an example step-by-step so you can see my process.
It’s a simple but powerful method that unlocks any scroll animation you can imagine. It’ll help you to create jaw-dropping scroll animations in Framer.
Let’s dive in:
Practice with recreations
Before you start from scratch, it’s super helpful to practice by recreating animations you love.
Here’s where to find inspiration:
Pick an animation you like and try to reverse-engineer it. This way, you’ll quickly understand how everything fits together.
Getting started
I remember having to learn HTML and CSS, just so I could create some really boring websites. Fast forward to now, with Framer I’m recreating some of the craziest 3D scroll animations.
I’ll be walking through an example step-by-step so you can see my process.
It’s a simple but powerful method that unlocks any scroll animation you can imagine. It’ll help you to create jaw-dropping scroll animations in Framer.
Let’s dive in:
Practice with recreations
Before you start from scratch, it’s super helpful to practice by recreating animations you love.
Here’s where to find inspiration:
Pick an animation you like and try to reverse-engineer it. This way, you’ll quickly understand how everything fits together.
Choosing an animation.
Choosing an animation.
Choosing an animation.
Set up sticky positioning
Here’s a secret: most crazy scroll animations work almost the same way.
You’ll start by setting up sticky positioning:
Add a frame and set its height to 100vh.
Change its position to sticky so it stays locked on screen while you scroll past it.
Then, animate elements inside the sticky frame using scroll transforms.
Sticky positioning keeps the “scene” in place while you animate inside it.
Set up sticky positioning
Here’s a secret: most crazy scroll animations work almost the same way.
You’ll start by setting up sticky positioning:
Add a frame and set its height to 100vh.
Change its position to sticky so it stays locked on screen while you scroll past it.
Then, animate elements inside the sticky frame using scroll transforms.
Sticky positioning keeps the “scene” in place while you animate inside it.
Set up sticky positioning
Here’s a secret: most crazy scroll animations work almost the same way.
You’ll start by setting up sticky positioning:
Add a frame and set its height to 100vh.
Change its position to sticky so it stays locked on screen while you scroll past it.
Then, animate elements inside the sticky frame using scroll transforms.
Sticky positioning keeps the “scene” in place while you animate inside it.
Setting up sticky positioning.
Setting up sticky positioning.
Setting up sticky positioning.
Plan the animation
Think of this like using any animation tool (like Jitter).
But here’s the twist:
Your timeline is vertical, not horizontal.
As the user scrolls down, they move through your animation frame by frame.
Plan what happens when, just like you would in a traditional timeline.
Plan the animation
Think of this like using any animation tool (like Jitter).
But here’s the twist:
Your timeline is vertical, not horizontal.
As the user scrolls down, they move through your animation frame by frame.
Plan what happens when, just like you would in a traditional timeline.
Plan the animation
Think of this like using any animation tool (like Jitter).
But here’s the twist:
Your timeline is vertical, not horizontal.
As the user scrolls down, they move through your animation frame by frame.
Plan what happens when, just like you would in a traditional timeline.
Planning the animation.
Planning the animation.
Planning the animation.
Position the timeline
Next, you’ll create the actual timeline.
Inside your Scroll Container, add the timeline frame.
Make sure the timeline sits directly underneath your sticky frame.
This timeline acts as a “scroll trigger map” for your animation.
Position the timeline
Next, you’ll create the actual timeline.
Inside your Scroll Container, add the timeline frame.
Make sure the timeline sits directly underneath your sticky frame.
This timeline acts as a “scroll trigger map” for your animation.
Position the timeline
Next, you’ll create the actual timeline.
Inside your Scroll Container, add the timeline frame.
Make sure the timeline sits directly underneath your sticky frame.
This timeline acts as a “scroll trigger map” for your animation.
Positioning the timeline.
Positioning the timeline.
Positioning the timeline.
Execute the animation
Now for the fun part: making it move.
You’ll add scroll animation effects by setting up scroll section triggers.
Basically:
As different sections of your invisible timeline scroll into view,
They trigger animations on your sticky frame.
This lets you control exactly what happens, and when, as the user scrolls.
Execute the animation
Now for the fun part: making it move.
You’ll add scroll animation effects by setting up scroll section triggers.
Basically:
As different sections of your invisible timeline scroll into view,
They trigger animations on your sticky frame.
This lets you control exactly what happens, and when, as the user scrolls.
Execute the animation
Now for the fun part: making it move.
You’ll add scroll animation effects by setting up scroll section triggers.
Basically:
As different sections of your invisible timeline scroll into view,
They trigger animations on your sticky frame.
This lets you control exactly what happens, and when, as the user scrolls.
Executing the animation.
Executing the animation.
Executing the animation.
Final touches
Preview your site and start scrolling to see everything in action.
Final touches
Preview your site and start scrolling to see everything in action.
Final touches
Preview your site and start scrolling to see everything in action.
Previewing the animation.
Previewing the animation.
Previewing the animation.
If you’re happy with the result, simply set the timeline’s opacity to 0.
It will stay invisible but still power all the scroll animations behind the scenes.
Here's a complete masterclass on this technique if you wanna dive deeper: 3D Stacked Animation
And that’s it, you’ve just learned how to create any scroll animation in Framer using the timeline technique.
Remixes
Here's a bunch of animations you can use to make your sites less boring:
If you’re happy with the result, simply set the timeline’s opacity to 0.
It will stay invisible but still power all the scroll animations behind the scenes.
Here's a complete masterclass on this technique if you wanna dive deeper: 3D Stacked Animation
And that’s it, you’ve just learned how to create any scroll animation in Framer using the timeline technique.
Remixes
Here's a bunch of animations you can use to make your sites less boring:
If you’re happy with the result, simply set the timeline’s opacity to 0.
It will stay invisible but still power all the scroll animations behind the scenes.
Here's a complete masterclass on this technique if you wanna dive deeper: 3D Stacked Animation
And that’s it, you’ve just learned how to create any scroll animation in Framer using the timeline technique.
Remixes
Here's a bunch of animations you can use to make your sites less boring:
Remixes of 3D animations for Framer.
Remixes of 3D animations for Framer.
Remixes of 3D animations for Framer.
