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.
Created by
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.
The 3D transforms applied to all images to create depth using z-index.
The 3D transforms applied to all images to create depth using z-index.
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.
The scroll transform effect used to create the immersive zoom in Framer.
The scroll transform effect used to create the immersive zoom in Framer.
The scroll transform effect used to create the immersive zoom in Framer.
