Animation
Apple TV Scroll Zoom Animation in Framer
This is a Framer recreation of the slick zoom-out scroll animation from Apple's TV 4K site. It demonstrates how you can transform a full-screen video into a beautifully framed TV scene with just a scroll. Feel free to remix and see how this effect was built using Framer's native features.
Created by
About the resource
Well, to be honest, this scroll animation could have its own dedicated course to cover all its nuances. But I still want to share some of the most important things I discovered while recreating it and some techniques I use (just in a nutshell).
First off, the foundation of the scroll animation is sticky positioning and scroll transforms. This technique is explained in detail in this video, so check it out if you're interested.
There was a tricky part I had to figure out, though.
With scroll transforms, you can set a from state and a to state. In theory, we could just use scale 3 for the from state and scale 1 for the to state to create this zoom-out effect as we scroll down.
The problem? A scale of 3 in the from state would mean a fixed scaled-up size, which would cover the full screen on SOME screens but not on larger ones.
So, how do we make sure the starting state always fills the screen completely, no matter if you're using a small laptop or an ultra-wide monitor?
The trick I found was to create a responsive structure with a bounding box around the screen. When resized, it nicely scales both the image used for the TV and the video component placed over the screen. I can't go into all the details, but it uses a lot of absolute positioning with relative percentage values for width and height, plus aspect ratio lock. Check out the remix to see the full structure.
About the resource
Well, to be honest, this scroll animation could have its own dedicated course to cover all its nuances. But I still want to share some of the most important things I discovered while recreating it and some techniques I use (just in a nutshell).
First off, the foundation of the scroll animation is sticky positioning and scroll transforms. This technique is explained in detail in this video, so check it out if you're interested.
There was a tricky part I had to figure out, though.
With scroll transforms, you can set a from state and a to state. In theory, we could just use scale 3 for the from state and scale 1 for the to state to create this zoom-out effect as we scroll down.
The problem? A scale of 3 in the from state would mean a fixed scaled-up size, which would cover the full screen on SOME screens but not on larger ones.
So, how do we make sure the starting state always fills the screen completely, no matter if you're using a small laptop or an ultra-wide monitor?
The trick I found was to create a responsive structure with a bounding box around the screen. When resized, it nicely scales both the image used for the TV and the video component placed over the screen. I can't go into all the details, but it uses a lot of absolute positioning with relative percentage values for width and height, plus aspect ratio lock. Check out the remix to see the full structure.
About the resource
Well, to be honest, this scroll animation could have its own dedicated course to cover all its nuances. But I still want to share some of the most important things I discovered while recreating it and some techniques I use (just in a nutshell).
First off, the foundation of the scroll animation is sticky positioning and scroll transforms. This technique is explained in detail in this video, so check it out if you're interested.
There was a tricky part I had to figure out, though.
With scroll transforms, you can set a from state and a to state. In theory, we could just use scale 3 for the from state and scale 1 for the to state to create this zoom-out effect as we scroll down.
The problem? A scale of 3 in the from state would mean a fixed scaled-up size, which would cover the full screen on SOME screens but not on larger ones.
So, how do we make sure the starting state always fills the screen completely, no matter if you're using a small laptop or an ultra-wide monitor?
The trick I found was to create a responsive structure with a bounding box around the screen. When resized, it nicely scales both the image used for the TV and the video component placed over the screen. I can't go into all the details, but it uses a lot of absolute positioning with relative percentage values for width and height, plus aspect ratio lock. Check out the remix to see the full structure.
The responsive setup with bounding box around the screen.
The responsive setup with bounding box around the screen.
The responsive setup with bounding box around the screen.
This setup works great for us because we can set the from state natively on the canvas. For example, by setting the height of this responsive structure to 100vh, it'll always fill up the entire viewport height, covering the full screen.
From there, we can add a from state of simply scale 1 (meaning no change) and then a to state where we scale it down to 0.5, for instance.
There's a small trick we need to use, though. Let's say we want a 21px font size in this zoom-out scene when it's fully zoomed out. On the canvas, we'd actually need to set the font size to 42px since it'll be scaled down to 50%.
This setup works great for us because we can set the from state natively on the canvas. For example, by setting the height of this responsive structure to 100vh, it'll always fill up the entire viewport height, covering the full screen.
From there, we can add a from state of simply scale 1 (meaning no change) and then a to state where we scale it down to 0.5, for instance.
There's a small trick we need to use, though. Let's say we want a 21px font size in this zoom-out scene when it's fully zoomed out. On the canvas, we'd actually need to set the font size to 42px since it'll be scaled down to 50%.
This setup works great for us because we can set the from state natively on the canvas. For example, by setting the height of this responsive structure to 100vh, it'll always fill up the entire viewport height, covering the full screen.
From there, we can add a from state of simply scale 1 (meaning no change) and then a to state where we scale it down to 0.5, for instance.
There's a small trick we need to use, though. Let's say we want a 21px font size in this zoom-out scene when it's fully zoomed out. On the canvas, we'd actually need to set the font size to 42px since it'll be scaled down to 50%.
The scroll transform effect set on the responsive structure.
The scroll transform effect set on the responsive structure.
The scroll transform effect set on the responsive structure.
Then, to optimize this for different breakpoints, we can duplicate the responsive structure on the primary breakpoint to create tablet and phone variations. We'll hide and show the correct frames on different breakpoints. These variations also have different scale values on the to state and, of course, different font sizes (bigger on each since tablet and phone will be scaled down more).
Then, to optimize this for different breakpoints, we can duplicate the responsive structure on the primary breakpoint to create tablet and phone variations. We'll hide and show the correct frames on different breakpoints. These variations also have different scale values on the to state and, of course, different font sizes (bigger on each since tablet and phone will be scaled down more).
Then, to optimize this for different breakpoints, we can duplicate the responsive structure on the primary breakpoint to create tablet and phone variations. We'll hide and show the correct frames on different breakpoints. These variations also have different scale values on the to state and, of course, different font sizes (bigger on each since tablet and phone will be scaled down more).
