Apple TV Scroll Zoom Animation in Framer

Apple TV Scroll Zoom Animation in Framer

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

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.

image of Nandi Muzsik

Created by

Apple TV Scroll Zoom Animation in Framer
Apple TV Scroll Zoom Animation in Framer
Apple TV Scroll Zoom Animation in Framer

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 on the scene

The scroll transform effect set on the responsive structure.

the scroll transform effect on the scene

The scroll transform effect set on the responsive structure.

the scroll transform effect on the scene

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).

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • New Apple Slider Component in Framer

    New Apple Slider Component in Framer

    Animation

    New Apple Slider Component in Framer

    New Apple Slider Component in Framer

    Animation

    New Apple Slider Component in Framer

    New Apple Slider Component in Framer

    Animation

  • Tedy Website Scroll Animation in Framer

    Tedy Website Scroll Animation in Framer

    Animation

    Tedy Website Scroll Animation in Framer

    Tedy Website Scroll Animation in Framer

    Animation

    Tedy Website Scroll Animation in Framer

    Tedy Website Scroll Animation in Framer

    Animation