Streaming live at 10am (PST)

Replacing Elements in Animation


#1

Afternoon everyone,

I am working on creating a pop-up modal for a site, but there was an update to interactions 2.0 and I am not sure how to do it anymore.

Previously, there was a an option to “replace elements in animation” and could chose what class I would like the interaction to effect (this blog post shows what I am talking about; https://webflow.com/blog/how-to-build-a-pop-up-modal-in-webflow)

That option has been removed however and I am not sure how to recreate that same effect (I would like for the modal to pop up when someone clicks on the hours block.)

read-only link: https://preview.webflow.com/preview/the-lions-den-shave-parlor?preview=2e7652253afb091ebe25df0266c8660f

Any help would be greatly appreciated. Thanks in advance.


#2

The “replace element” is now inside the interaction settings. Well, not the same functionality but the better one. Here is where you select what should be affected by the triggers. Basically first you select the element you want to animate and then just set the condition of either animating this instance of the object or any other with the same class name. Then you have the same option as before to make sure it only affects children or siblings.


#3

Hi Matthews,

Hope this GIF helps how you can swap elements over easily using the navigator.

CloudApp

#4

Thank you! This GIF is perfect.


#5

Hey guys,
Similar problem, I see how this can be used for one piece of content however my issue is:

I have a list of links, each one needs to show the corresponding div and hide the rest of them.
This was simple with the old method but I can’t figure out a way to re-use the interactions with the new setup.
The elements are on a different part of the page so I’m unable to use the child or sibling options, any ideas?


#6

Hi Everyone -
The rollout of this update is a bit… frustrating. From what I understand, if I have a list of 10 cards with a hover action, I have to create a unique animation for each one of those cards?

I used to just apply the animation to an individual card, select “Replace Elements in Animation”, select the class of the element I wanted to animate, and restrict the animation to sibling or children elements. --Not the most ELEGANT solution, but it was workable.

Did this update just make this whole process even more difficult?