Repeat Animation for Modals

[Chris-Reedy]

I would like to run WOW Animate when opening up a modal to animate its contents. This works, but by design, WOW doesn't do this after its run once. I can understand for default use, but where modals are concerned, is there a code edit that can be used where I can have them animate each time a certain modal is opened? For instance, right now, if I click open modal 1 the animation runs. Great! But once I close and reopen the same modal without refreshing the page, the animation doesn't run again since it already has. I'd like it to. Is there a reload code? I know you want to keep this plugin light, but curious if this is possible. Thanks!

[Chris-Reedy]

So it looks like it DOES reload each time, but ONLY if I add: data-wow-duration=".3s" to the div wow code. [1] Or am I crazy? [2] If I'm not crazy, that's good, but doing this gives me that flash people see and solve by .wow {visibility:hidden;} - even though I already have that in my .css and it solves the flash problem when not in the modal. This flash occurs only in the modal now.

[Chris-Reedy]

I was able to repeat the wow animation each time a modal opens without flash by adding the stop and init code to my modal open code, like this example:

$(document).ready(function(){
    $('.info').on('click', function ( e ) {
        wow.stop();
        wow = new WOW(
                {
                boxClass:     'wow',      // wow
                animateClass: 'animated', // animated
                offset:       0,          // 0
                mobile:       true,       // true
                live:         true        // true
                }
            );
        wow.init();
        Custombox.open({
            target: $(this).data('href'),
            effect: 'push',
            speed: 500,
            overlayColor: '#2C3E50',
        });
        e.preventDefault();
    });
});
</script>

[Chris-Reedy]

RATS! So close.

I have a grid of boxes. Each box is a trigger that opens a modal. Inside each modal are items that appear with WOW.

My above "solution" did work, but only for boxes (modal triggers) that WOW already loaded. If I scroll down and WOW loads more boxes (modal triggers), the modal is empty when opened. It's like WOW isn't restarting for hidden items...

Can anyone help?

[jh-sh]

I think you misuse wow.js.. AFAIK, It's not supposed to animate modals appearance by design (it triggers class changes, if element hits the viewport with specified options) I could've gotten you wrong - maybe you're about animating the content inside the pop-up (while scrolling) Anyway: You can still manually toggle classes while triggering pop-ups appearances (using same animate.css file), for example - remove .animated class after pop-up faded out.

[Chris-Reedy]

I'm not trying to animate the modal's appearance. I'm using it as it is designed, as you explained, to trigger class changes if the element hits the viewport.

Here is how I have it:

• boxes are animated to be visible as they are scrolled into the viewport - by wow plugin design
• each box is a trigger to open a modal that is 80% of the screen - by modal plugin design
• once box is clicked, the modal opens, and inside the modal are elements that animate into visibility once the modal is opened - by wow design (viewport never changes so they just appear - like it does with 0 offset if you never scrolled)

What I want to accomplish is:

• each time the same modal is opened, its contents animate into visibilty - not just the first time which is what it does successfully.

I got this to work (see above), but there was a side effect:

• boxes (modal triggers) that were already in the viewport had modals that operating correctly as I described in what I want to accomplish.
• boxes that I scrolled into the viewport did animate to be visible, but when I clicked that box to trigger the modal open code, the modal was blank. The contents didn't animate into visibility. It's like the wow code didn't restart.

So you are saying that I can use .addClass('.animated') and .removeClass('.animated') on my modal trigger code to accomplish what I want instead of using wow.stop() and wow.init()?

[Chris-Reedy]

EXAMPLES

[1] Here is a development page of how it works with no changes to any code: http://www.shynemedia.com/dev/sm/2015_site/portfolio/logos/index.php

• all boxes scrolled into viewport open up modals with elements that animate into visibility
• animation does NOT repeat - elements animate into visibility all at once if modal was previously opened
• one problem - content flashes before appearing if same modal opened again - I wrote about that above

[2] Here is a development page of how it works if I add code so the animation repeats on modal open: http://www.shynemedia.com/dev/sm/2015_site/portfolio/logos/index2.php

• animation DOES repeat - GREAT!
• boxes already in viewport open up modals with elements that animate into visibility and that animation repeats each time the modal is opened - GREAT!
• boxes NOT already in viewport, that are scrolled into viewport, open modals with blank content - elements do not animate into visibility - NOT GREAT!

It feels like the wow plugin isn't fully restarted or that it's a timing issue - I'm stumped.

Hope this makes it more clear...