How to trigger a GSAP function when a slide comes active with Reveal.js?

问题

I want to add some simple animation to a presentation. I use GSAP (TweenMax) for this work. I have no problem with the animation setup, but these animations triggers as soon the presentation starts.

How can I control this, so that only when the slide with animations is active the scripts execute?

All your help is welcome. Regards!

EDIT:

Well, looks like reading the docs of the libraries answers at least 90% of this kind of questions. For the lazies (like me :) ) here´s what I found:

To check when the slide change, we use this:

 Reveal.addEventListener( 'slidechanged', function( event ) {
    // event.previousSlide, event.currentSlide, event.indexh, event.indexv
} );

And in my animeScript.js, I just link the event, just like:

Reveal.addEventListener( 'slidechanged', function( event ) {
    myTween();
} );

If we want to target a specific slide, we use data-state argument in the <section></section> tags like:

<section data-state="slide2">
  <img id="logo2" src="images/logo.png">
  <h2>No Theme</h2>
  <p>There's no theme included, so it will fall back on browser defaults.</p>
</section>

And link the state in the animeScript.js like:

Reveal.addEventListener( 'slide2', function() {
  myTween();
  TweenMax.to(logo3, 1,{opacity:1, delay:1.5});
}, false );

Regards!

来源：https://stackoverflow.com/questions/23936987/how-to-trigger-a-gsap-function-when-a-slide-comes-active-with-reveal-js