Replace Elements in Animation Missing

Design help Animations & Interactions
1

I’m trying to open a pop-up modal when clicking on a button.

Using this tutorial: How to build a pop-up modal in Webflow | Webflow Blog

But I’m stuck at this step:

Now because we want this interaction to target another element, go back to the interactions list by clicking the X in the top right (closing the current interaction creation flow).

Then scroll down to the checkbox in the “Replace Elements in Animation” section, tick the box, select “Class” from the “Replace with” dropdown menu, type in “Modal Wrapper” and hit enter. Now the interaction we just created affects the Modal Wrapper div.

Replace%20Elements%20in%20Animation
Replace%20Elements%20in%20Animation320×624 293 KB

I can’t see the “Replace Elements in Animation” option?

Thanks,

Fred

Here is my public share link: LINK
(how to access public share link)

2

I found the answer:

Right click on the action, choose “change target”, go to the navigator and click on the hidden div.

3

Well at least part of the answer.

Following this tutorial (we should be rewritten by the way ;), I stumble on the second interaction for the button “Show Sign Up Form” - I t seems to reassign the one prior which showed the modal:

Now because we want this interaction to target another element, go back to the interactions list by clicking the X in the top right (closing the current interaction creation flow).

Then scroll down to the checkbox in the “Replace Elements in Animation” section, tick the box, select “Class” from the “Replace with” dropdown menu, type in “Modal Wrapper” and hit enter. Now the interaction we just created affects the Modal Wrapper div.

We’re done with this interaction, so click the X in the upper right, until you’re back to the Interactions panel.

Now we’re going to add another interaction, this one on the selected element, triggered by click/tap.

Select “Start an Animation” from the “On 1st Click” dropdown menu.

Create a timed animation and call it “Show Sign Up Form.” Then add 3 timed actions:

4

Here’s how I solved it:

Since any action in an automation can be assigned to an individual element (right click), I combined the trigger animation and the show form animation into one.