Animations affecting a class vs. affecting an element

I have a Timed Animation Interaction in my project called “List Items Move Left.” In it I have a list item called “layout209_list” that contains five list items, each called “conversion-problem_item”. Initially I want all the list items to be invisible (opacity = 0%) and be positioned 32 pixels to the right. Then, when the list scrolls into view, I want all the list items to reveal themselves (opacity = 100%) and move from right to left, one after another, to line up beneath the section’s “Your website isn’t converting…” heading.

Now when I create the actions, I would think that I could set the initial state of the opacity and position of all five list items with only two actions. The first would set the opacity = 0% for all five list items:

(Opacity)
Affect: Class (All elements with this class)
Timing: Set as initial state
Opacity: 0%

The second action would set the position of all five items:

(Move)
Affect: Class (All elements with this class)
Timing: Set as initial state
x-position: 32 PX

Next, I want to create an action for each item that reveals the item and positions it below the heading. I’d create the first action by clicking on the End point in the timeline and creating two actions for that element:

(Opacity)
Affect: Selected Element
Timing: Start: After Previous Action
Opacity: 100%

(Move)
Affect: Selected Element
Timing: Start: With Previous Action
x-position: 0 PX

I would then also create the above two actions for the four remaining items so that each item would move to the left and reveal itself, one after another.

Here’s what I don’t understand. When I create these End actions for the five items and I click “Affect: Selected Element”, this modifies the first two initialization Actions I created so that instead of affecting all items in the conversion-problem_items class, it now affects just the selected element. In other words, changing the Affect from Class to Selected Element changes that setting for all the actions I’ve created. This means that I have to create two initialization actions for each of the five list items instead of for the class as a whole. Why does Webflow work this way? Why can’t I create initialization actions on a per-class basis and then create End actions for each list item in that class on an item-by-item basis? Is it always “either/or”?

P.S. In the section above the section I’ve discussed, I did create initialization actions on an element-by-element basis, but I would be less work if I could have used a class to affect them all.

Screen Shot 2022-08-25 at 3.35.01 PM

Screen Shot 2022-08-25 at 3.34.50 PM


Here is my public share link: LINK

If you’re just looking to slide the items in, I would use the pre-made “Slide” animation. It will save a lot of time.

In regards to your class v. element question, the class setting is used to help implement animations across your entire website. In your case, I believe you’ll need to affect the element to achieve what you’re looking to do.

1 Like

Thanks. I guess there’s no quicker way to do this than create interactions on each list item element.