EventListener reset TimelineMax

[James Feeney]

Hi all - this is my first post on GSAP, hope you guys can help me. Love GSAP by the way, it is awesome.

 

I'm using Reveal EventListeners (https://github.com/hakimel/reveal.js#slide-states) to trigger timeline sequences. These sequences are a combination of staggerFrom and from, and I use DrawSVG with Yoyo sometimes too.

 

I found this example that pretty much matches my setup: http://stackoverflow.com/questions/23936987/how-to-trigger-a-gsap-function-when-a-slide-comes-active-with-reveal-js

 

Here is one of the sequences, they all follow the same structure:

Reveal.addEventListener('slideName', function () {
    tl = new TimelineMax();
    tl.staggerFrom("#aSlideElement", 9, {
            rotationY: 1080,
            scale: 15,
            y:"-1900px",
            x:"600px",
            ease: Power4.easeInOutQuint
        }, 0.7)
        .from("#anotherSlideElement", 9, {
            onUpdate: cssFilterTween,
            onUpdateParams: ["{self}", "blur", 100, 1],
            ease: Power4.easeInOutQuint
        }, 0)
        .from("#yetAnotherSlideElement", 10, {
            fill:"#0f0c31",
            ease: Power4.easeInOutQuint
        }, 5)
        .from("#soManySlideElements", 4, {
            autoAlpha: 0,
            ease: Power4.easeInOutQuint
        }, 10)
}, false);

Reveal is basically a presentation slides framework and each slide has its own sequence that is triggered using an eventlistener.

 

My problem is these sequences do not completely reset the timeline and all the elements when you 'leave' a slide. This means if you go back and forth between slides, the elements are sometimes misplaced, finish in the wrong position or get muddled start/finish timings. Eventually they just slow to a halt and do nothing. I have to refresh the page to get it back to where things started.

I've tried restart(), clear(), remove(), kill(), pause(0), etc.

 

I've tried placing 'overwrite: 3' amongst each tween.

 

I've tried placing a single global timeline above the eventlisteners, rather than create a new timeline for each slide.

 

I think it may be something to do with the volatile triggering that occurs when quickly going back and forth between slides, but I assume GSAP should be pretty quick at resetting?

 

Any help would be awesome, this is really puzzling me.

 

Thanks,

James

 

[Diaco]

Hi James Feeney 

 

pls define tweens/animations out of the listener and just play, restart or pause in listener fn , and i think that's better to make a Codepen Demo available .