Streaming live at 10am (PST)

How to Toggle Interaction Animation B after 5000ms IF Interaction Animation A is triggered?


#1

I have the following Ineractions:

Interaction Animation 1.0A
Interaction Animation 2.0B

Both animations work as intended.

Now I have a New interaction called:
Interaction Animation 1.1B

this animation standalone works as intended, except, I must have this animation toggle 2.0B after 5000ms.

I must get Animation 2.0B to fire after 5000ms after 1.1B to triggered.

How do I configure in webflow to trigger another animation in the Ineractions 2.0 editor after 5000ms?


#2

Hi, @miekwave

Need a more detailed description of the animation you need. If, for example, the animation should work when hovering, you can create 2 transparent triggers “A” (show) and “B” (hidden).

When you hover on “A” start to play 2 hover interactions: 1 — your animation, 2 — delay animation 5000ms then display “A” (hidden) and “B” (show).

So, for trigger B you can apply your second animation etc.

I hope, clearly explained)


#3

@bro-design

Thank you replying.

I hope this clarifies things.
http://html-sandbox.webflow.io/cascade-ineractions

Basicially in that example I must get Animation 2.0B to toggle after 5000ms after animation 1.1B is clicked on.

edit:
My workaround right now is (painstakingly) manually redrawing each step of 1.1B in 2.0 starting at the 5000ms mark. I do not know how to manuallly copy it over in additional to another z-mask. Duplicate animation is not an option for this particular instance.



#4

So, for “Click me for interaction 1.1B” change 2 Mouse Click Interactions:
1 — momentally play 1.1B Interaction
2 — delay 5000 ms then play 2.0B interaction

Or did I misunderstand you?


#5

The Timed Actions menu is mising alternate triggers.

I simply want 2.0B to play 5000ms after 1.1B is clicked on

2.0B standalone is working as intended.
(this example provided above is an oversimplification, I have a workaround, but need a faster way to do this)

The if I were to dupelicate a 5000ms version, as a second action to single click i must manually nudge dozens of animation events to fit the timeline because onset and shared timings- there’s no way for me to bulk nudge them because if I do from the beginning it messes up timings of 2.0B
image

I need to be able to trigger 2.0B as a single event in the action editor instead of redrawing it.
image


#6

Your finally result need like this?
http://broplayground.webflow.io/how-to-toggle-interaction-animation-b-after-5000ms-if-ineraction-animation-a-is-triggered


#7

@bro-design

Oh yes. :slight_smile: Good job.

Were you able to get Webflow interactions interface to

  • launch another trigger (favorable)
    or
  • manually build it into into 1.1B with a 500ms delay? (current workaround/unfavorable)
    or
  • custom programming or script to launch (or relaunch) another trigger after 5000ms? (favorable if easy copy, paste n’ replace job)

#8

Well you can find in the list of pages by the link below)


#9

@bro-design

I see you got dual triggers for the click on 1.1B. This is a good solution for easy duplicates. On future complex animations, I’m going to adjust onset timings accordingly. In mean time, I’m going to use my originals and leave them at that.

Thanks


#10

@miekwave you are welcome) Good luck :v::slightly_smiling_face: