Advanced Zoom Scroll Effect

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

Advanced Zoom Scroll Effect

This is a recreation of the advanced scroll zoom animation from the Vrtlwrld website in Framer. By remixing this project you'll learn how sticky positioning works and how to get the most out of Framer to achieve advanced animations.

image of Nandi Muzsik

Created by

Advanced Zoom Scroll Effect
Advanced Zoom Scroll Effect
Advanced Zoom Scroll Effect
scroll zoom animation thumbnail

Related Lesson

Framer Tutorial: Advanced Scroll Zoom Animation

scroll zoom animation thumbnail

Related Lesson

Framer Tutorial: Advanced Scroll Zoom Animation

scroll zoom animation thumbnail

Related Lesson

Framer Tutorial: Advanced Scroll Zoom Animation

About the resource

This effect utilizes sticky positioning along with several scroll transforms to pull it off. We use multiple scroll transforms because each image has to be moved individually.

Another interesting aspect of this effect is the requirement for nested mask frames. We need to use these to apply double scroll transforms, which counteract the scale effects and prevent images from becoming too large.

This might sound somewhat complicated, but if you watch the tutorial video, it'll all make sense.

About the resource

This effect utilizes sticky positioning along with several scroll transforms to pull it off. We use multiple scroll transforms because each image has to be moved individually.

Another interesting aspect of this effect is the requirement for nested mask frames. We need to use these to apply double scroll transforms, which counteract the scale effects and prevent images from becoming too large.

This might sound somewhat complicated, but if you watch the tutorial video, it'll all make sense.

About the resource

This effect utilizes sticky positioning along with several scroll transforms to pull it off. We use multiple scroll transforms because each image has to be moved individually.

Another interesting aspect of this effect is the requirement for nested mask frames. We need to use these to apply double scroll transforms, which counteract the scale effects and prevent images from becoming too large.

This might sound somewhat complicated, but if you watch the tutorial video, it'll all make sense.

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

  • 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

  • Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation

    Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation

    Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation