I am trying to create an animation in which a horizontal row of elements moves up into view, one after another, when a section scrolls into view. I’m trying to duplicate what you see in the “Clients” section of this page in which each row of icons for the clients rolls up into view, one after the other, as the user scrolls down.
I’ve created a prototype at the link below. I can make two blocks imitate what I’m seeing in that Clients section but I’ve had to create two separate interactions to achieve it, one for each block. Each interaction is the same except for the element it’s affecting. My first question is, is there some way I can achieve the desired affect with just one interaction? I know you can set Affect for either “Class” or “Interaction Trigger” but I’m not sure how this would work since there is a delay between the end of the animation for the first block and the start of the animation for the second block. Being able to reduce this to a single interaction since I need to display two rows of five elements and it seems inefficient to have to write ten separate interactions.
A second minor question: I noticed on that Clients page that if you scroll up and down so that you repeatedly scroll into and out of that section, the animation will repeat itself. But if I scroll my page up and down, the animation won’t repeat unless I refresh the page. Is there a way to make this animation repeat itself if I scroll into view, out of view, and then back into view without refreshing the page?
The Design link doesn’t see to show the animation, just my code, so here’s a link to the actual development site where the animation can be seen.
Thanks!
Here is my public share link: https://preview.webflow.com/preview/animations-ac23a9?utm_medium=preview_link&utm_source=designer&utm_content=animations-ac23a9&preview=be4057c4c1fa51953e28f14bdca86d54&workflow=preview