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


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:
(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:

1 Like