Can anyone guide me on how to create this scroll animation where the mobile screen stays fixed and the images change on scroll with slight fade, scale, and transform effects, as shown in the video? If there’s any clonable example or URL available, please share.
Hey @Defendant ,
You can explore the approaches taken in this cloneable and this cloneable to brainstorm how you want to enable this interaction on your site.
The second cloneable might not seem to be working on first glance in some browsers, but if you set Sliding Mockups Wrapper element’s display property to block, you can see the interaction work based on scroll.
While these may not be exact match with your reference but you can take some inspiration from those to customize and build for your project.
Hope this helps.
1 Like
You’re looking for a scroll-triggered animation where the phone stays fixed and the content inside animates (fade/scale/transform). Most people build this using GSAP + ScrollTrigger or Webflow’s built-in scroll animations. Search for “GSAP ScrollTrigger pin & animation” — there are lots of examples that do exactly that. You can also find Webflow clonables under “scroll animation pin phone mockup” that show the same effect.
1 Like
@AJ_Dev @finlland I did but it is not smooth as refrence https://scrollsite2.webflow.io/