I have multiple elements with the same class that I would like to individually appear upon scrolling into view and disappear when scrolled out. Similar to the elements found on this page: Github
The elements that I would like to add this effect to have the class “snippet section”
Read only link: Webflow - Code++
There are two levels when you create an interaction, and both have an option to target a class rather than one specific element.
Let’s call the first level the Interaction level, where you create a new animation or select an existing one. Here I created a new one.
The second level is where you define the animation, that’s the animation level. here I created an action in the animation.
At the second level, animation level, you can set the action to target a class rather than, as depicted above, the interaction trigger (the element you’ve added the animation to). But in your case that’s not what you’re aiming for. Let the actions of your animation target the interaction trigger.
In your case you want to go back to the interaction level, and select Class instead of Element:
Now look at your Navigator, all elements of the same class are now each an interaction trigger, with an interaction symbol attached to them, even if you only defined the IX once, on the first one of them:
Great, thanks! Any advice on how to get the animations to repeat? Like if I scroll past them and then scroll back up?
