Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
James Feeney

EventListener reset TimelineMax

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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,
            ease: Power4.easeInOutQuint
        }, 0.7)
        .from("#anotherSlideElement", 9, {
            onUpdate: cssFilterTween,
            onUpdateParams: ["{self}", "blur", 100, 1],
            ease: Power4.easeInOutQuint
        }, 0)
        .from("#yetAnotherSlideElement", 10, {
            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.





Link to comment
Share on other sites

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 .

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.