Saw this animation on a webflow page on Twitter, and decided to recreate it with no code!
It uses a Image of a iPhone, and a screen image (both you can change)
and it utilizes scroll transforms and opacity to achieve this effect.
The base of it is, that you scroll down the image will zoom in and cover the frame, while covering it will also fade.
The inner screen will fade first, revealing the content behind, then the device will fade.
in both the devices the concept is the same.
Get Reliable Designs for Uninterrupted Growth
Achieve stunning, consistent marketing visuals with BLC's design service. Quick turnarounds and personalized attention & satisfaction guaranteed.
Get Reliable Designs for Uninterrupted Growth
Achieve stunning, consistent marketing visuals with BLC's design service. Quick turnarounds and personalized attention & satisfaction guaranteed.
Get Reliable Designs for Uninterrupted Growth
Achieve stunning, consistent marketing visuals with BLC's design service. Quick turnarounds and personalized attention & satisfaction guaranteed.
Connect with me to gain insights, access valuable resources, and see behind the scenes content. Follow me to stay updated with tips, tricks, and design inspiration.
Connect with me to gain insights, access valuable resources, and see behind the scenes content. Follow me to stay updated with tips, tricks, and design inspiration.
X / Twitter
Follow me here for updates, tips, and insights. I'm most active here, sharing everything from important news to casual thoughts.
Instagram
Find videos on important topics, resources, and other design related content. Follow for tutorials and design inspiration!
Instagram
Find videos on important topics, resources, and other design related content. Follow for tutorials and design inspiration!
Figma Community
Access free resources and assets trusted by 6K+ designers. Follow me on Figma to enhance your design projects.
Figma Community
Access free resources and assets trusted by 6K+ designers. Follow me on Figma to enhance your design projects.
© 2024 Bright Life Creations. All rights reserved.
Add social share buttons to your Framer website.
Let visitors share your page to their social media accounts in one click.
