Phone Scroll Animation in Framer

Phone Scroll 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

Phone Scroll Animation in Framer

This is a Framer recreation of the scroll animation from the original Hamilton website template. Feel free to remix the project and explore how to achieve this effect using Framer (no coding required).

image of Nandi Muzsik

Created by

Phone Scroll Animation in Framer
Phone Scroll Animation in Framer
Phone Scroll Animation in Framer

About The Resource

This demo is using the good old technique of sticky positioning and scroll transforms.

I explained this technique in detail in this YouTube video where I recreated a scroll animation from the VRTLWRLD website.

The main concept behind this approach is to create a 'sticky' section that remains visible as we scroll on the website. In our case, this section includes the phone mockup. By adding trigger frames and linking them to scroll sections, these triggers move alongside the 'sticky' section as we scroll down. This setup allows us to activate scroll transforms (using scroll section triggers) and adjust the elements within our sticky box.

About The Resource

This demo is using the good old technique of sticky positioning and scroll transforms.

I explained this technique in detail in this YouTube video where I recreated a scroll animation from the VRTLWRLD website.

The main concept behind this approach is to create a 'sticky' section that remains visible as we scroll on the website. In our case, this section includes the phone mockup. By adding trigger frames and linking them to scroll sections, these triggers move alongside the 'sticky' section as we scroll down. This setup allows us to activate scroll transforms (using scroll section triggers) and adjust the elements within our sticky box.

About The Resource

This demo is using the good old technique of sticky positioning and scroll transforms.

I explained this technique in detail in this YouTube video where I recreated a scroll animation from the VRTLWRLD website.

The main concept behind this approach is to create a 'sticky' section that remains visible as we scroll on the website. In our case, this section includes the phone mockup. By adding trigger frames and linking them to scroll sections, these triggers move alongside the 'sticky' section as we scroll down. This setup allows us to activate scroll transforms (using scroll section triggers) and adjust the elements within our sticky box.

phone scroll animation scroll transform setup

Phone scroll animation scroll transform setup.

phone scroll animation scroll transform setup

Phone scroll animation scroll transform setup.

phone scroll animation scroll transform setup

Phone scroll animation scroll transform setup.

In the image above, you can observe that we are applying a scroll transform to the screen. The "from" state is at "1" opacity and "1" scale, while the "to" state involves a basic Y offset, causing the image to animate towards the top. This process creates the scrolling effect on the phone screen.

In the image above, you can observe that we are applying a scroll transform to the screen. The "from" state is at "1" opacity and "1" scale, while the "to" state involves a basic Y offset, causing the image to animate towards the top. This process creates the scrolling effect on the phone screen.

In the image above, you can observe that we are applying a scroll transform to the screen. The "from" state is at "1" opacity and "1" scale, while the "to" state involves a basic Y offset, causing the image to animate towards the top. This process creates the scrolling effect on the phone screen.

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

  • Highlight key products with dynamic image grid effects

    Image Grid Scroll Animation in Framer

    Animation

    Highlight key products with dynamic image grid effects

    Image Grid Scroll Animation in Framer

    Animation

    Highlight key products with dynamic image grid effects

    Image Grid Scroll Animation in Framer

    Animation

  • 3D-rendered early access ticket with gradient blue design

    Floating 3D Ticket in Framer

    Animation

    3D-rendered early access ticket with gradient blue design

    Floating 3D Ticket in Framer

    Animation

    3D-rendered early access ticket with gradient blue design

    Floating 3D Ticket in Framer

    Animation