Reverse animation with same trigger element

Hi ! I have a burger icon in my header and I have a section that is hidden by default.
I’ve created a timeline that animates this section from opacity 0 to 1 to display it. So far so good.
I’ve created 2 actions : open and close.
When I click on the icon, I play my timeline and my section appears, that’s OK.
But how can I play the reverse animation by clicking on the same icon ?
I’ve tried to add a class on the section and add condition to run the action.
So when I click the first time, the “open” action is triggered and my animation runs and it adds the class .active.
I have set a condition on action “close” to run only if my section has .active class (and it has after the first action).
But when I click on the icon again, nothing happens, like it can’t detect my .active class on the section…

Hi Cedric,

that’s JavaScript :slight_smile: If you try to add an EventListener for a class which does not exists on the DOM on page load (because you add it later), this event will never fire. For such cases we need advanced concepts like Event Bubbling (Event Bubbling in JavaScript – How Event Propagation Works with Examples), which are not supported yet by Bricksforge.

My recommendation: split your trigger icons. Create a play icon “.play-icon” and a hide icon “.hide-icon”. Set the “.hide-icon” to display: none. Then only your play icon is initially showing. When clicking “.play-icon”, fire three actions:

  1. Hide “.play-icon”
  2. Show “.hide-icon”
  3. Play your timeline

With this concept, opening a mobile menu for example, you also could show a different icon when the nav is open.

Clicking the “.hide-icon”, you would fire the following actions:

  1. Show “.play-icon”
  2. Hide “.hide-icon”
  3. Play your timeline reversed

Done :slight_smile:

1 Like

Thanks for your reply Daniele. Yep I totally understand about classes that doesn’t exist yet.
I was hoping maybe there was something doable with tl.reversed() for example in the conditions.
Like : if timeline is already in the end in the conditions.

Hey!

Not sure what I’m doing wrong, I tried a delayed toggle class too but this seems to be taking up lots of my time now and I’ve no clue what’s wrong with this - haha. It must be something I am doing. Ideally I wanted the icon to animate too, but that’s kinda hard when we’re hiding and showing two different elements here (unless I do that delayed, but it won’t be smooth if people click fast for example).

I’ve recorded what I’ve done so any advice/help greatly appreciated. I’ve basically copied what you’d said above toggling play-icon and hide-icon, you can see hide-icon shows and is set to reverse the animation but when I click it, nothing happens :confused:

http://recordit.co/y0wyVxWNbY

My bad, really sorry! I noticed that I had a condition on there which I totally missed from before!

I have it working now, thank you!

Relating to using the same element and animating it, I was thinking what about using the second div simply as a transparent overlay trigger on top of the animated one which I can click.