How to call GSAP function when turning on a slide using Reveal.js?

I want to add some simple animation to the presentation. For this work, I use GSAP (TweenMax). I have no problem adjusting the animation, but these animations start as soon as the presentation starts.

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

All your help is appreciated. Hello!

EDIT:

Well, it seems that reading documents from libraries answers at least 90% of these kinds of questions. For laziness (like me :)) here is what I found:

To check when the slide change, we use the following:

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

And in my animeScript.js, I just bind an event like:

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

If we want to target a specific slide, we use an argument data-statein the tags <section></section>, for example:

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

animeScript.js, :

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

!

+4

Source: https://habr.com/ru/post/1542509/


All Articles