Combining a trigger interaction with two scroll interactions that loop

[Brian_M_Fromknecht]

I’m trying to have it loop so when the page loads, the tagline element fades in and slides to the right, then when the user scrolls down the tagline element slides back and fades out. However, I can’t seem to get it to repeat the interaction as the user scrolls back up to the tagline element so it comes back into view as it did on page load.
In a nutshell:

1. Tagline fade in and slide right on page load
2. Tagline fade out and slide left on scroll downward
3. Tagline fade back in and slide right on scroll upwards
4. Repeat or loop
   Can’t seem to figure that part out. I can get it to fade out and slide left on scroll downward but can’t get it to fade back in and slide right as the user scrolls back up.
   
   
   
   

---

Here is my public share link: Webflow - werackyourworld.com

Live Link: http://werackyourworld.webflow.io/

[Brando (Brandon Roche)]

Hey @Brian_M_Fromknecht,

You can create an identical copy of the header. Set one copy to animate on load trigger and the second to the scroll interaction. You may need to set the first element to display: none after a set amount of wait time.

Having two elements to work with will make it easier than trying to set one element to have so many different interactions!

Hope this helps!

Cheers!

[Brian_M_Fromknecht]

Thanks for the idea! I think that will work…