Immersive Scroll Zoom Animation in Framer

Immersive 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

New

New

New

Animation

Immersive Scroll Zoom Animation in Framer

This is a scroll zoom animation recreated in Framer, as seen on the Telescope website. Feel free to remix the project and explore how this immersive effect can be built in Framer.

image of Nandi Muzsik
image of Prianca S.
Image of Louis

Created by

,

and

Collage of diverse people, fashion, and objects on black background
Collage of diverse people, fashion, and objects on black background
Collage of diverse people, fashion, and objects on black background

About the resource

To create the immersive scroll and zoom-in animation in Framer, I started by setting up a sticky frame for the hero section. Inside this, I added a main wrapper called "images wrap," where I stacked all the images and scattered them across the canvas using absolute positioning. Each image was wrapped inside its own frame, and both the image and its wrapper were rotated along the Y-axis by 90 degrees with preserve-3D enabled. This preserved the depth effect and allowed for a 3D rotation feel.

All these image wrappers were then placed under the main "images wrap," which also had preserve-3D and perspective applied. I added scroll transform effects on each image, modifying the "to" state offset so they moved out of the canvas when triggered by scroll. Separately, I introduced text layers that animated into view using scroll transforms as well.

About the resource

To create the immersive scroll and zoom-in animation in Framer, I started by setting up a sticky frame for the hero section. Inside this, I added a main wrapper called "images wrap," where I stacked all the images and scattered them across the canvas using absolute positioning. Each image was wrapped inside its own frame, and both the image and its wrapper were rotated along the Y-axis by 90 degrees with preserve-3D enabled. This preserved the depth effect and allowed for a 3D rotation feel.

All these image wrappers were then placed under the main "images wrap," which also had preserve-3D and perspective applied. I added scroll transform effects on each image, modifying the "to" state offset so they moved out of the canvas when triggered by scroll. Separately, I introduced text layers that animated into view using scroll transforms as well.

About the resource

To create the immersive scroll and zoom-in animation in Framer, I started by setting up a sticky frame for the hero section. Inside this, I added a main wrapper called "images wrap," where I stacked all the images and scattered them across the canvas using absolute positioning. Each image was wrapped inside its own frame, and both the image and its wrapper were rotated along the Y-axis by 90 degrees with preserve-3D enabled. This preserved the depth effect and allowed for a 3D rotation feel.

All these image wrappers were then placed under the main "images wrap," which also had preserve-3D and perspective applied. I added scroll transform effects on each image, modifying the "to" state offset so they moved out of the canvas when triggered by scroll. Separately, I introduced text layers that animated into view using scroll transforms as well.

Collage of lifestyle images with text 'Real Recommendations by real people'

The 3D transforms applied to all images to create depth using z-index.

Collage of lifestyle images with text 'Real Recommendations by real people'

The 3D transforms applied to all images to create depth using z-index.

Collage of lifestyle images with text 'Real Recommendations by real people'

The 3D transforms applied to all images to create depth using z-index.

For the zoom-in animation, I used both versions of the image—one with the background and multiple nested cut-out versions without background. Each cut-out image had its own scroll transform, scaling from smaller values like 0, 0.4, 0.5, up to 1, in sequence. This layering created a progressive zoom-in effect, controlled by scroll-triggered sections.

I stacked these nested images using z-index so that they appeared one above the other. On the topmost image, I added a text element that revealed each word sequentially with a scroll-based animation. This combination of scroll transforms, 3D rotation, and layered scaling recreated the immersive visual effect exactly as original without using code.

For the zoom-in animation, I used both versions of the image—one with the background and multiple nested cut-out versions without background. Each cut-out image had its own scroll transform, scaling from smaller values like 0, 0.4, 0.5, up to 1, in sequence. This layering created a progressive zoom-in effect, controlled by scroll-triggered sections.

I stacked these nested images using z-index so that they appeared one above the other. On the topmost image, I added a text element that revealed each word sequentially with a scroll-based animation. This combination of scroll transforms, 3D rotation, and layered scaling recreated the immersive visual effect exactly as original without using code.

For the zoom-in animation, I used both versions of the image—one with the background and multiple nested cut-out versions without background. Each cut-out image had its own scroll transform, scaling from smaller values like 0, 0.4, 0.5, up to 1, in sequence. This layering created a progressive zoom-in effect, controlled by scroll-triggered sections.

I stacked these nested images using z-index so that they appeared one above the other. On the topmost image, I added a text element that revealed each word sequentially with a scroll-based animation. This combination of scroll transforms, 3D rotation, and layered scaling recreated the immersive visual effect exactly as original without using code.

Scroll animation UI settings panel with spring transition

The scroll transform effect used to create the immersive zoom in Framer.

Scroll animation UI settings panel with spring transition

The scroll transform effect used to create the immersive zoom in Framer.

Scroll animation UI settings panel with spring transition

The scroll transform effect used to create the immersive zoom in Framer.

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

  • Feel more human everyday" headline with a "Request demo" button, displayed above a row of rotating image tiles featuring modern objects like a keyboard, car, and vinyl player

    Circular Website Intro Scroll Animation in Framer

    Animation

    Feel more human everyday" headline with a "Request demo" button, displayed above a row of rotating image tiles featuring modern objects like a keyboard, car, and vinyl player

    Circular Website Intro Scroll Animation in Framer

    Animation

    Feel more human everyday" headline with a "Request demo" button, displayed above a row of rotating image tiles featuring modern objects like a keyboard, car, and vinyl player

    Circular Website Intro Scroll Animation in Framer

    Animation