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 ) {
} );
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 );
!