New
New
New
Tips & tricks
- Animating
- Anything
Tips & tricks
- Animating
- Anything
Tips & tricks
- Animating
- Anything
Use This Technique for Animating Anything in Framer
The other day, my good friend Tamas came to me with a question. He wanted to create a mask-in effect that plays when elements come into view. At first, he made a code override for the effect, but he started running into issues with that solution. That’s when I stepped in and said, “Why don’t you just make this effect using Framer’s no-code features?” Well, in this video, you’ll learn how to animate almost any property on scroll, inside of Framer. It’s going to be a banger, so make sure to follow along!
Posted by
Nandi
Table of contents
The problem
Framer’s built-in scroll animations are awesome for quick results. You can fade, scale, rotate, skew, all that good stuff. But that’s also the limitation. What if you want to mask something in? Or change the corner radius, border, or shadow as it scrolls into view?
You can’t do that from the default “Effects → Scroll” panel. Those options only let you modify a fixed set of properties.
That’s where this new technique comes in. Instead of using scroll animations directly, we’ll use component variants, which gives us full control over what changes and how.
The core idea: Animate between variants
The problem
Framer’s built-in scroll animations are awesome for quick results. You can fade, scale, rotate, skew, all that good stuff. But that’s also the limitation. What if you want to mask something in? Or change the corner radius, border, or shadow as it scrolls into view?
You can’t do that from the default “Effects → Scroll” panel. Those options only let you modify a fixed set of properties.
That’s where this new technique comes in. Instead of using scroll animations directly, we’ll use component variants, which gives us full control over what changes and how.
The core idea: Animate between variants
The problem
Framer’s built-in scroll animations are awesome for quick results. You can fade, scale, rotate, skew, all that good stuff. But that’s also the limitation. What if you want to mask something in? Or change the corner radius, border, or shadow as it scrolls into view?
You can’t do that from the default “Effects → Scroll” panel. Those options only let you modify a fixed set of properties.
That’s where this new technique comes in. Instead of using scroll animations directly, we’ll use component variants, which gives us full control over what changes and how.
The core idea: Animate between variants
Tamas Bodo's scroll animation effect.
Tamas Bodo's scroll animation effect.
Tamas Bodo's scroll animation effect.
Here’s the trick:
Wrap your element (like an image) in a frame,
Turn that frame into a component,
Create two variants — one for the “out of view” state and one for the “in view” state,
Then use Scroll Variant to animate between those two variants when the layer enters the viewport.
This unlocks everything. You can animate masks, borders, corner radii, blur, color, basically anything available inside the component.
Step 1: Build the component
Grab my remix link and head over to the starter page, just to make sure we’re both looking at the same thing.
Here’s the trick:
Wrap your element (like an image) in a frame,
Turn that frame into a component,
Create two variants — one for the “out of view” state and one for the “in view” state,
Then use Scroll Variant to animate between those two variants when the layer enters the viewport.
This unlocks everything. You can animate masks, borders, corner radii, blur, color, basically anything available inside the component.
Step 1: Build the component
Grab my remix link and head over to the starter page, just to make sure we’re both looking at the same thing.
Here’s the trick:
Wrap your element (like an image) in a frame,
Turn that frame into a component,
Create two variants — one for the “out of view” state and one for the “in view” state,
Then use Scroll Variant to animate between those two variants when the layer enters the viewport.
This unlocks everything. You can animate masks, borders, corner radii, blur, color, basically anything available inside the component.
Step 1: Build the component
Grab my remix link and head over to the starter page, just to make sure we’re both looking at the same thing.
Starter page on scroll effects project.
Starter page on scroll effects project.
Starter page on scroll effects project.
Start with your image and wrap it in a frame. Right-click and choose Create Component. Inside the component canvas, create two variants:
Out (when the element isn’t visible yet)
In (when it animates into view)
In the Out variant, you can slightly scale down the image (say 0.95) and apply a mask to hide it.
Now, for that crisp, sharp edge you saw in the demo, make sure your mask path has three points instead of two. Place the 0% and 100% points right next to each other to get that nice, hard edge.
Then move those points down for the Out variant and back up for the In variant. Already, you’re building a dynamic mask animation with no code at all.
Step 2: Smooth out the motion
Now, let’s make it feel smooth. Head to the right panel → Transition settings, and customize the easing.
Swap out the default spring for an ease-in-out curve, bump the duration to about 1 second, and preview the result. You’ll immediately see the difference, the motion feels deliberate and cinematic rather than mechanical.
Step 3: Make it reusable
Before you duplicate your component, expose the Image Fill as a variable.
Select the image → right panel → Fill → Create Variable.
That lets you change the image per instance directly in the canvas, super handy when you’re working with multiple images or sections.
Step 4: Connect it with scroll variant
Now back on your main canvas, select all your component instances and go to Effects → Scroll Variant. Set the Trigger to Layer in view, and choose the variant transition from Out → In.
Preview your site, scroll down, and watch each image animate beautifully as it comes into view. You can even toggle Replay to control whether the animation plays again when scrolling back up.
Step 5: Animate anything
Here’s where this technique gets wild. Since you’re using component variants, you’re not limited by the built-in scroll properties. You can animate:
Corner radius (e.g., from 0 → 100 px)
Shadows
Borders
Filters (like blur or brightness)
Even nested elements inside your component
Want your image to morph into a rounded card with a shadow as it appears? Do it. Want a gradient overlay to fade in while the mask animates? Easy. This approach gives you total control.
Bonus: Play videos when they come into view
You can take this exact same logic and apply it to videos. In one of my iPhone 15 Pro demo sites, I wrapped a video in a component with two variants: Not Playing and Playing.
On Not Playing, the video’s playback is set to “No.” On Playing, it’s set to “Yes.”
Then I used a Scroll Variant with Layer in view to switch between them. Result? The video only starts playing when it scrolls into view, not when the page first loads. Perfect for performance and UX.
Wrapping up
By combining component variants with scroll triggers, you’re effectively building your own animation system inside Framer. You can animate anything, anytime, and make your designs feel alive in ways that Framer’s default scroll effects can’t match.
Here’s my full tutorial if you get stuck somewhere: Secret animation technique
So next time you think, “I’ll probably need code for that,” stop. Try this technique first. You’ll be surprised how much is possible with Framer’s no-code tools.
Start with your image and wrap it in a frame. Right-click and choose Create Component. Inside the component canvas, create two variants:
Out (when the element isn’t visible yet)
In (when it animates into view)
In the Out variant, you can slightly scale down the image (say 0.95) and apply a mask to hide it.
Now, for that crisp, sharp edge you saw in the demo, make sure your mask path has three points instead of two. Place the 0% and 100% points right next to each other to get that nice, hard edge.
Then move those points down for the Out variant and back up for the In variant. Already, you’re building a dynamic mask animation with no code at all.
Step 2: Smooth out the motion
Now, let’s make it feel smooth. Head to the right panel → Transition settings, and customize the easing.
Swap out the default spring for an ease-in-out curve, bump the duration to about 1 second, and preview the result. You’ll immediately see the difference, the motion feels deliberate and cinematic rather than mechanical.
Step 3: Make it reusable
Before you duplicate your component, expose the Image Fill as a variable.
Select the image → right panel → Fill → Create Variable.
That lets you change the image per instance directly in the canvas, super handy when you’re working with multiple images or sections.
Step 4: Connect it with scroll variant
Now back on your main canvas, select all your component instances and go to Effects → Scroll Variant. Set the Trigger to Layer in view, and choose the variant transition from Out → In.
Preview your site, scroll down, and watch each image animate beautifully as it comes into view. You can even toggle Replay to control whether the animation plays again when scrolling back up.
Step 5: Animate anything
Here’s where this technique gets wild. Since you’re using component variants, you’re not limited by the built-in scroll properties. You can animate:
Corner radius (e.g., from 0 → 100 px)
Shadows
Borders
Filters (like blur or brightness)
Even nested elements inside your component
Want your image to morph into a rounded card with a shadow as it appears? Do it. Want a gradient overlay to fade in while the mask animates? Easy. This approach gives you total control.
Bonus: Play videos when they come into view
You can take this exact same logic and apply it to videos. In one of my iPhone 15 Pro demo sites, I wrapped a video in a component with two variants: Not Playing and Playing.
On Not Playing, the video’s playback is set to “No.” On Playing, it’s set to “Yes.”
Then I used a Scroll Variant with Layer in view to switch between them. Result? The video only starts playing when it scrolls into view, not when the page first loads. Perfect for performance and UX.
Wrapping up
By combining component variants with scroll triggers, you’re effectively building your own animation system inside Framer. You can animate anything, anytime, and make your designs feel alive in ways that Framer’s default scroll effects can’t match.
Here’s my full tutorial if you get stuck somewhere: Secret animation technique
So next time you think, “I’ll probably need code for that,” stop. Try this technique first. You’ll be surprised how much is possible with Framer’s no-code tools.
Start with your image and wrap it in a frame. Right-click and choose Create Component. Inside the component canvas, create two variants:
Out (when the element isn’t visible yet)
In (when it animates into view)
In the Out variant, you can slightly scale down the image (say 0.95) and apply a mask to hide it.
Now, for that crisp, sharp edge you saw in the demo, make sure your mask path has three points instead of two. Place the 0% and 100% points right next to each other to get that nice, hard edge.
Then move those points down for the Out variant and back up for the In variant. Already, you’re building a dynamic mask animation with no code at all.
Step 2: Smooth out the motion
Now, let’s make it feel smooth. Head to the right panel → Transition settings, and customize the easing.
Swap out the default spring for an ease-in-out curve, bump the duration to about 1 second, and preview the result. You’ll immediately see the difference, the motion feels deliberate and cinematic rather than mechanical.
Step 3: Make it reusable
Before you duplicate your component, expose the Image Fill as a variable.
Select the image → right panel → Fill → Create Variable.
That lets you change the image per instance directly in the canvas, super handy when you’re working with multiple images or sections.
Step 4: Connect it with scroll variant
Now back on your main canvas, select all your component instances and go to Effects → Scroll Variant. Set the Trigger to Layer in view, and choose the variant transition from Out → In.
Preview your site, scroll down, and watch each image animate beautifully as it comes into view. You can even toggle Replay to control whether the animation plays again when scrolling back up.
Step 5: Animate anything
Here’s where this technique gets wild. Since you’re using component variants, you’re not limited by the built-in scroll properties. You can animate:
Corner radius (e.g., from 0 → 100 px)
Shadows
Borders
Filters (like blur or brightness)
Even nested elements inside your component
Want your image to morph into a rounded card with a shadow as it appears? Do it. Want a gradient overlay to fade in while the mask animates? Easy. This approach gives you total control.
Bonus: Play videos when they come into view
You can take this exact same logic and apply it to videos. In one of my iPhone 15 Pro demo sites, I wrapped a video in a component with two variants: Not Playing and Playing.
On Not Playing, the video’s playback is set to “No.” On Playing, it’s set to “Yes.”
Then I used a Scroll Variant with Layer in view to switch between them. Result? The video only starts playing when it scrolls into view, not when the page first loads. Perfect for performance and UX.
Wrapping up
By combining component variants with scroll triggers, you’re effectively building your own animation system inside Framer. You can animate anything, anytime, and make your designs feel alive in ways that Framer’s default scroll effects can’t match.
Here’s my full tutorial if you get stuck somewhere: Secret animation technique
So next time you think, “I’ll probably need code for that,” stop. Try this technique first. You’ll be surprised how much is possible with Framer’s no-code tools.
