So I’m trying to figure out if there’s a faster way to trigger multiple page load animations. I have a portfolio website where each row of images fades in consecutively triggered by a page load.
In IX1, I could create a few animations like, say, “Fade in on Load” for the first row, “100ms Delay + Fade in on Load” for the second row, “200ms Delay + Fade in on Load”, for the third row, and so on. Then I could simply select each image and then select the animation I want to apply on it.
In IX2, I find myself having to set a Opacity 0% as an initial state and 100% after the fade in for every single image. This is way slower, comparing only having to do one animation for an entire row.
Is there a way I can simply create animations and apply them to different objects, or create one animation for an entire class, instead of building the same one over and over again for different elements?
I think you have to use the “Replace elements in animation” selector, and type in the name of the class of the element you are trying to affect. I created a button that shows/hides a hidden div full of content when clicked, and wanted to use several of these hidden divs and several of the same buttons on 3 different tabbed content sections.
I copy pasted the button over, along with the hidden container to the new tab of content, then selected the cloned button and used the replace elements feature to select the class name of the div that the first button links too. Works like a charm.
I ran into the same problem. It does seem like a lot more extra work than before when it comes to applying the same interaction to multiple elements. I’m running into this issue as well.
Are you adding a new class to the other elements so you can target them within the “replace elements in animation”? The issue i’m running into is what if i have three div’s with the same classes, and i want them all to have the same interaction. When i hover over the first div everything works fine with the interaction, but when i try to interact with the other div’s the interaction breaks. How can i apply the same interaction to multiple div’s sharing the same class? Here is a demo example to see what i’m talking about.
Your sample problem was helpful to me in solving a problem I’m having as it shows me that for each individual div and text box, each need to be labeled individually.
For instance, you have a class “div block” assigned to three divs. If you add a sub-class to each so it is “div block” “1”, “div block” “2”, “div block” “3”, etc and then name the text boxes accordingly, then when you assign an animation to each, you choose the class with it’s sub class for each box. That way when you mouse over 1 box, they don’t all enlarge at the same time.
Here is an example, hopefully it helps clear things up. I think the part that takes some getting used to at first is that IX 1.0 had us visually selecting the elements to affect. IX 2.0 has us typing in the class name of the element.
It seems so far that the way you described by adding extra sub classes is the only way i can figure out how to-do it as well. The only part i dislike about this solution is you’d have to create extra classes in your code for each individual element. When you do this in CSS or Jquery the traditional method you can simply assign the code to only animate the sibling elements of the parent element. This is much cleaner because you don’t have to add more code to your website.
I wonder if Webflow has another way to achieve the goal to animate multiple elements on the page with the same interaction.
You make a good point, but I don’t think this method adds any more code to your website than the old method. What I mean is, behind the scenes, if you throw 5 generic text blocks onto the canvas, all of them exist without a visible class name, so to us it looks like they are the same. To webflow though, behind the scenes it is seeing something like wf-text-block-1, wf-text-block-2, etc. That’s why when you click on an element in the old animations panel to assign it, it did so without having you first assign it a class. The only extra code you get, is instead of webflows hidden generic names, you are stringing class names of your own together.
Again though, I might be wrong Good discussion though, as it has made me understand a few things in more clarity.
This was a good little exploration of applying animations to different elements! But yes, seems like using ‘replace elements in animation’ is the way to go to achieve a few different things when applying the same interaction to different objects. Like @NewInBoston said, just a bit less visual. It can also lead to a few extra button presses. But oh well!
We just all have to relearn some workflows it seems.
I have applied the hover animation to the class (as I will have a bunch of these links), but it animates the link I am not hovering on. And then the link with the same class, does not perform the animation.
Please advise on the best way to perform this animation? Ideally I want on hover:
Text colour to change black to blue
Underline to increase from 2-3px
Text to move up 3px
And the reverse on hover off
There may be some conflicting code there—I tried to perform this initially with hover classes, but the text colour would not work on publish (only preview).
On your trigger settings for the interaction, set it to Class. This will make the animation apply to all links with that same class.
Then inside the Link Animation make sure only children are affected by the animation. This will make sure it only animates the link currently being hovered.
Also add a transition for the border on the main copy link element to match your interaction in order to smooth out the border growth.
A tip, to avoid the “jumpiness” created by increasing the border try using the Highlight option under Box shadows instead. It gives you the same effect without affecting the height of the element which causes the jump. Will create a much smoother effect. Remember to do the transition for the box shadow.
Good discussion though, as it has made me understand a few things in more clarity.
