Hi,
I am trying to “loop” my “scroll into view” interaction which does the following:
- Hero section: A realistic earth with particles appears on the right side.
- Quote section: The earth moves down to that section, grows a bit and more particles appear.
- 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!