Any workaround to always trigger "scroll into view" when scrolled into view?

Hi,

I am trying to “loop” my “scroll into view” interaction which does the following:

  1. Hero section: A realistic earth with particles appears on the right side.
  2. Quote section: The earth moves down to that section, grows a bit and more particles appear.
  3. Facts & Figures section: The earth comes closer a bit, but shrinks and then disappears to the top.

This is set:
https://preview.webflow.com/preview/okapi-orbits-ec5bfb517018fab5b904c0c040?utm_medium=preview_link&utm_source=designer&utm_content=okapi-orbits-ec5bfb517018fab5b904c0c040&preview=8424178803bec766cb37974c6fa9a365&pageId=657b40cb3c31723b3e89ef4e&workflow=preview
(click on “play” twice to make the earth appear)

Now I want to “reverse” the interaction when the user scrolls back up. The earth should always follow into view and do the grow/move/opacity animations dependent on the section that’s in view.

I want to achieve this without changing it to “while scrolling in view”, because I want to be able to set a duration for the animation rather than make it dependent on the speed of the scroll of the user.

I tried so set “scroll into view” per section, but it only does it the first time and then never again (I set the earth opacity to 50% instead of 0% at the end of section “facts & figures”, so you can see where it’s stuck).

Does anybody know how I can achieve this?

Thanks in advance!

Yes. I have implemented this on a number of sites. I really think it would require a screen share so message me if you would like to find a time where I can walk you through it.

Here is an example: https://www.plesioncapital.com/

1 Like

I have tried to wrap my head around the technique that you taught @circlecut to achieve the loopable scroll into/out of view interaction but I can’t quite figure it out. Can you put some words into how it works?

I don’t know why she has two seperate Scroll into/out of view interactions on the trigger element and what part that plays in the interaction working?

Hope you can help me out!

Shoot me a message and we can talk!

Hi there. I’ve just had a look at that site and its very impressive. I’d love to know how you did some of the bits of it (like the pyramid to fill screen transition. Would you mind sharing a read only version of the webflow editor so I could have a look. Thanks in advance :pray: