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.
Created by
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.
