Thanks @Waldo for responding.
TLDR: I’m literally trying to copy what @PixelGeek did in his video referenced above. More precisely, what I want to create is a series of sections whose backgrounds seamlessly fade from one to another, like this site which is used as an inspiration in the video: https://www.helloheco.com/
Intro
The focus of the problem is indeed on interactions reusability. Please ignore the read-only site provided as it is constantly changing as I try different things. See below for the basic canvas setup.
Canvas Setup
- DIV [section parallax][1]
– DIV [bg][1] (this is nested within the DIV above)
- DIV [section parallax][2]
– DIV [bg][2]
- DIV [section parallax][3]
– DIV [bg][3]
- etc.
The Desired Interaction
Each section fills the area of the screen, and when each section is scrolled into/out of, the background of said sections should animate.
INTERACTIONS PANEL > TRIGGER CONFIGURATION
With the new IX2.0 as per July 2018, a number of changes were introduced to the tools that targeted elements and classes to be affected by an interaction. The screenshots below show where you can define if you want this interaction to populate and affect just the selected element, or all elements with this class - AND you can even pick if you want it to select a root class or a combo class.
This happens to work well bc when I switch between selecting [section parallax][2] and [section parallax], the Navigator shows me the difference:
vs 
As you can see, it’s magic. It effortlessly populates only elements with the interaction depending on what you select in the panel. This is expected behavior, so that’s fine. This works well.
The idea is to use the [section parallax] selector, not the combo, because then I’ll only have to set it once for all sections, and then “forget it”. But this doesn’t work, because of the below…
TIMED ANIMATIONS
The issue arises with trying to customize the actions in the animations in response to the triggered elements.
To properly set up the Animation for each instance, I need to tell Webflow to target the [bg] child element of the [section parallax] element (the latter being targeted using the element/class selector above) that is being scrolled into/out of, as opposed to the [bg] element that was originally set for the Action. Previously, we could re-target Actions through the “replace elements in animation”. See screenshot from Nelson’s vid for reference:
In his case, designers had to manually replace the element/class that each animation targeted. Notice two things in his tutorial:
- his [bg] elements were SIBLING to the elements that the interaction was being applied to. It allowed for unprecedented flexibility and precision in targeting because you could target whatever you wanted wherever it might be in the canvas using…
- combos on the [bg] elements. You could choose whether to target combos or to target the roots of that combo, making it easy to narrow down exactly which element you wanted. Also, combos provided convenient ways to customize elements without needing to create new root classes for each mod.
Today it is replaced by a “change target” option when you right-click Actions, and this simplified double drop-down:
One thing that didn’t exist at the time was a way to limit selection based on being a child element of the trigger, and that seems to have been introduced - but at the expense of combo class selection. EDIT: The “change target” only allows you to click to select a new target - you cannot specify if you want to select based on the root or the combo class like you could before.
In addition, the drop-down options are not self-explanatory and the explainer on the website leads me to believe that it simply doesn’t work as described, particularly in my case.
This is what the page says about this feature (emphasis is mine):
Targeting only Children and Sibling classes
You can choose to limit the classes that are affected by an action by specifying whether they are children or siblings of the trigger element.
Now, going back to the button example. You can use the class target to animate all button arrows when you hover over a button. However, here you’ll notice that hovering over one button will animate all button arrows within all the buttons on that page. To limit the action to the button on which you hover, make sure to choose the Only Children with this class option under the affect menu.
You can use the Only Siblings with this class option in the same way when the element you want to animate is a sibling of your trigger element, such as a menu drop-down or a popup modal.
– Triggers and animations - Webflow University Documentation
I want to do exactly that: to limit the action to only affect children of the element.
Perhaps this works if you only use one class. However, this is why in my original post I wondered if elements were picked based on their root class (which is how each Action is listed in the interface) versus their combo class. I am using combo classes on these elements. If it picks based on combo class ([bg][1], [bg][2] etc.), then it logically wouldn’t find the same element once a new parent element is defined ([section parallax][1], [section parallax][2] etc.) because it would be looking for [bg][1], not just any [bg]. And I currently have no way to select “just” the root class of the element to make this animation reusable - I’d have to duplicate the animation and redefine the target for the animated actions for each section, compromising reusability.
Conclusion
This beast of a reply got much longer than I wanted or expected, but I hope it clearly explains what I believe are the main differences between how IX2 used to target in Nelson’s vid, versus how it targets today.
I’m sure the changes were made for a good reason but they seem to have limited the possibilities for flexible reusability in the process. Perhaps I’m missing how the whole thing works and it’s a simple solution away - I remain positive and actually hope this is the case. For now, I’m fortunate that I only have a handful of sections to design, so the worst case is that I do it manually.
Hope this helps,
Fei
for the simple and brilliant solution to achieve the same. I will try it out today and let you know how it goes.
)
