Animation on page load is fine, then it's not

Wappler General
1

Sorry for the post title, I have no clue what to call this issue I am having. maybe someone can advise.

I am using an animate region on a navbar toggler / burger menu, to open a modal, and in there is all my navigation for mobile.

Take a look at https://www.pukkaevents.com, make your browser window width small enough to go mobile.

  1. Click the burger menu, it opens a modal
  2. Click Explore or Languages, it animates to the next frame
  3. Click Go back, and you are back where you began.
  4. Close the modal, and then open it again with the same burger menu icon.
    Suddenly the animation starts running on its own.

I have tried to fix it but not having much luck
There is a var set to 0, at 0 it should show frame 1, when set to 1 it should show frame 2 and so on.

2

Hey Paul,

Maybe I’m stating the obvious, but on page load your class list does not have any animation classes:

Screen Shot 2021-05-30 at 10.07.36 AM
Screen Shot 2021-05-30 at 10.07.36 AM712×127 20.7 KB

But after performing your steps, they remain added:

Screen Shot 2021-05-30 at 10.07.57 AM
Screen Shot 2021-05-30 at 10.07.57 AM850×142 34.9 KB

So wouldn’t it make sense that when you open the modal again the animation is performed?

3

Thank You Ken you are exactly right, I never noticed that before.

Now to figure out how to fix it… Hmm.
If I start at page load on animation 1 showing, and then open animation 2 or 3, and then go back to animation 1, and close / reopen the modal, I would want it to remain at it’s same state it was before close, which with the procedure above, should be exactly like the page just loaded and it just appeared.

On first open of the modal it has

<!-- First Animation -->
<div is="dmx-animate" id="animateNavItemStart" class="align-content-start d-flex flex-wrap px-3" style="position:absolute; width:100vw;">...</div>

<!-- Second Animation -->
<div is="dmx-animate" id="animateNavExplore" class="align-content-start d-flex flex-wrap px-3 animated slideOutRight" style="position: absolute; width: 100vw; animation-duration: 1ms;">...</div>

<!-- Third Animation -->
<div is="dmx-animate" id="animateNavLanguages" class="align-content-start d-flex flex-wrap px-3 animated slideOutRight" style="position: absolute; width: 100vw; animation-duration: 1ms;">...</div>

The issue seems to be that it adds the class of animated slideOutLeft on animating to slide 2 or 3, then when clicking Go back, it amends the classes to animated slideInLeft on animation 1
At the same time it also removes an inline style of animation-duration: 1ms; from slide 2 and 3.

In the inspector if I perform the above steps and before re-opening the modal I manually remove the 2 classes on animation 1 animated slideInLeft as well as add back the inline styles of animation-duration: 1ms; to animations 2 and 3.
Then on reopen it all works again as expected.

So you definitely figured out why it’s acting odd in my opinion, but now to figure out how to remove the 2 excess classes and add back the inline style on modal close, I do not think there is a way to read if a modal is open or closed?

Any ideas @mebeingken

4

Not built-into Wappler. You can use a quick jQuery based solution on hide static event:

onhide="$('#animateNavItemStart').removeClass('animate slideInLeft slideOutLeft');$('#animateNavExplore').removeClass('animate slideInLeft slideOutLeft');"
1 Like
5

Thanks so much @sid that almost worked out the box for my needs, I made a small alteration to

onhide="$('#animateNavItemStart').removeClass('animated slideInLeft');$('#animateNavExplore').css('animation-duration', '1ms');$('#animateNavLanguages').css('animation-duration', '1ms');"

@Teodor do you think this could be a bug in Wappler, where if an Animated Region is set to Initially Visible then it should already do this by default?

1 Like