Responsive interactions on Scroll

Hi guys!

I’ve been playing around with some interactions that I want to create on scroll. I was able to achieve the idea, but unfortunately, the execution is not quite precise. The idea is for the pictures to move, scale, and tuck behind the picture that scrolls in view. The problem is that it works only on the browse height on which I set the animation. If I resize the browser (just height) the images don’t line up anymore. Can you please help me? The inspiration for this project was this website: https://timeframe-app.webflow.io

My project:

hi @Atanas_Malamov I can only suggest tha you will be better to use While scrolling in view as you will have more control over triggers , but Im not sure if this help. Worth to try. :wink:

CleanShot 2020-12-05 at 10.31.13

Hi @Stan ! Thanks again for your help with my project. I tried this approach. It produces the same effect. If I resize the browser the images dont align properly behind the image scrolling form bellow. They seem to align perfectly into the phone of the “inspiration” website.

Hi @Atanas_Malamov I have checked original site and when you resize browser height, images are moving around (without scroll) until mobile is in centre then it stops.

@Stan yes. you are right. But on the original website, they align with further scroll towards the screen of the iPhone and for me, they misalign if I resize. You can see the screenshots.

Do you change position to sticky when images destination is reached? Or you can just hide them. :wink:

Does anyone know how to contact admins of this forum to report SPAM? As @dewyyyp_dewpppy is IMHO not a user.

Hi Stan! Thank you for your suggestions.I tried different positions sticky, absolute, fixed. But none worked as desired. I am wondering where im going wrong. Clearly its possible within Webflow, I just dont know enough to approach this issue. Thank you for your help!

not sure that’s true, I see they using React so there may be some use of any React animation library

I have just take a deeper look into this project and here is an image that is loaded after images animation ends.

  1. The mobile wrapper is fixed
  2. mobile mockup is centred and animated images are inside mobile in absolute position.

This can mean that animated position (out of mobile) is just offset of initial position inside mobile. When page scroll they just fall into their original position than this image is loaded.

Than hidden images are swapped for these that reveal on end (there is second div container with another slot of images ) :thinking:

@Stan YES!!! yes yes!! brilliant! I was able to achieve the effect by reversing the animation in the same way you suggested! Thank you so much! I’m learning a lot these days!

1 Like