Streaming live at 10am (PST)

Reusing interactions


#1

Related to this but with a twist:

My objective is to recreate the effect in this brilliant tutorial by @PixelGeek with the new way that Interactions work:

I’m trying to make several “sections” with a “bg” class nested within animate in the same way as the video, using today’s Interactions functionality. My [bg] class has a combo [1], [2] etc. to change the background with at each section, just like @PixelGeek said we would be able to, months ago.

However, I continue to experience glitches trying to create a reusable Interaction that targets the [bg] child class of the [section] trigger class even when using the solution in this forum thread (nesting the target object within the trigger). It doesn’t work when combo classes are used for the target object (let’s say, [bg][1]) because I believe it targets the full combo class of the object, not giving designers the option to only target the root class like Nelson does in the video. Even though visually in the Actions pane, it only says it’s targeting the root class (ex. [bg]), but I think the interface is lying.

image

When I apply the same animations to a new interaction on another section (ex. [section][2]), the Actions in the Animation don’t automatically select the [bg] class of the new section
(ex. [section][2] --> [bg][2]).
It continues to select the old [bg][1] from the original section. This severy hampers the reusability of the animation compared to what was shown in Nelson’s video. If only I had the “Replace Elements in Animation” drop-down…

If you want to take a look, go to the Page called “Home parallax”:
https://preview.webflow.com/preview/sweenyandco?preview=143ece7369e7663ab957070735596fc1

Is this a bug, a glitch or a feature request? Please advise. Might just have to do this all manually for now until I find a solution for this.


Are interactions broken atm?
#2

Hi @feeei thank you so much for reaching out!

At this time within Interactions 2.0 when you target by a class name it actually targets all elements with the exact same classes applied.

So a interaction affecting an element with class-one would only affect elements with the class name class-one.

The interaction actually won’t affect elements with combo classes on top of that such as class-one v2 as those are recognized as separate data objects.

My recommendation as a workaround when you have multiple elements with a base class and combo classes but want all of them to animate. Is to wrap each of them in a div tag with the same class name that has no styles applied to it. Maybe call the class name on those wrapping divs animation-1 or something to that effect.

I’m double checking with the team to see if there is any way to allow interactions be applied on the base class of an element to apply to classes with that same base class and combo classes.


#3

Hi @feeei it looks like I’m incorrect here, my sincerest apologies for that.

You should be able to apply an interaction action item to an element with the class of class-one and then set it to happen by class. Then trigger the same interaction with an element of the root class class-one and has a combo class on it.

I am trying to understand exactly what you’re trying to do within your home parallax page :thinking:


#4

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.
image image

This happens to work well bc when I switch between selecting [section parallax][2] and [section parallax], the Navigator shows me the difference:
image vs image

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:

  1. 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…
  2. 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:
image

image image

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.
https://university.webflow.com/article/triggers-animations

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


#5

Hi @feeei thank you so much for taking the time to write all of that out. It definitely looks like it’s a unique effect to achieve and there are multiple ways to achieve it. I watched through Nelson’s video again and we have significantly changed the UI since the release (as that is from November of 2017).

I’ve found that it’s much easier to create a simpler data structure for those types of interactions, even though it may not necessarily be entirely reusable, I tried a different approach:
https://preview.webflow.com/preview/image-scroll-reveal?preview=438a64c58d04fbe49a9547251a1bc2ea

http://image-scroll-reveal.webflow.io/

Structure

I created 3 sections, each have their individual content and are set to relative position and a z-index higher than 0.

Then I create a fixed position element that is set to a z-index of 0, and is set to a width of 100% and 100vh for the height. I then added 3 elements in this div that are set to 100% width/100vh. They each have different background images and different classes.

I also wrapped everything in a hold content block for easy copying and pasting.

Interactions

I then created a page load interaction where all images except for the first one are set to an opacity of 0%.

Then I select section 2 and create a “while scrolling in view” interaction that made image 1 go to 0% opacity, and image 2 go to 100% opacity:
CloudApp

Then I selected section 3 and went to create the next interaction. This time I duplicated the one from before and retargeted image 2 to go from 100% ➞ 0% opacity, and image 3 to go from 0% ➞ 100% opacity:
CloudApp

I have also made the project cloneable and wrapped everything in an easy to copy and paste div to implement this in your own site:

Please let me know if this is helpful or if you have any additional questions.

I’m happy to help further!


#6

@Waldo Thank you :bowing_woman:t2: for the simple and brilliant solution to achieve the same. I will try it out today and let you know how it goes.

As for the animation reusability factor, I still stand by my feedback that the selector for replacing elements in animations has taken a step back. The way it was before - a search box to find elements through classes and options for choosing root or combo - was more convenient and powerful. Now it requires manual searching and clicking to select, AND you can’t pick between root and combos.

The functionality still exists in the trigger configuration menu and it works so well. I hope it doesn’t get removed.

(Oh, and good move on the cute meerkats… :heart:)


#7

Your method works smoothly, and it was what I suspected - I will have to copy animations for each section instance in order to reference different backgrounds each time. It works, but it’s not elegant, nor reusable. My animations tab will be full of clones of one animation!

I went over to the youtube comments for that video and dug up this comment here which I fully agree with because in addition to my initial feedback, I have the same problem regarding hidden elements being hard to select:

My solution for now is to go to the Navigator to select objects from there. It’s not ideal though, the search bar was still better…

I’ll leave it at that. I hope the webflow team will take the feedback and reconsider the reusability of animations. @Waldo, whats the best way for me to leave feedback on this feature?

Oh, and I discovered those were pics of mongoose (pl. mongeese?), not meerkats. My bad.

EDIT: One more thing regarding reusability:
After making duplicates of animations just to have the same effect happen on multiple elements, the real downfall is if I ever want to tweak the animation. Now I can’t just do it in one place and have the change propagate to every instance - I have to do the same change for all the duplicates manually.


Button background scale on hover
#8

This is also confusing because in the “Reusing Interactions” video posted in that thread on youtube, at the end of the video the reused interaction doesn’t even work. The arrow animates on the first button, but not the second (2min 50sec).


#9

LOL :woman_facepalming:t2:
Anyhows. @lorentracy I think I found the loophole way to make Interactions reusable like I described in the other post where we met. I still have to try it out with my parallax thingy on this thread… stay tuned :v:t2:


#10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.