Jump to content
Search Community

TimelineLite reversing animation and stopping 2 seconds before it come s to its beginning(end)

Thomas James Thorstensson test
Moderator Tag

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

Todays last question

 

Is there a way that when I reverse an animation I can choose for it not to run until the very beginning (seeing as there is a way that I can reverse from before the end of animation).

 

I tried the following since I wanted the 'reversed' version of the animation to stop 2 seconds from its beginning (otherwise it fades out to blank). But it didnt work.

 

    var callbk = tl.eventCallback("onComplete", doReverse);


    function doReverse() {        

        tl.reverse();
        timeline.addPause(2);


    }
Perhaps there is a way I can continually listenfor progress during the reversal and break/pause at a certain time?
 
Ideas welcome, in your own time. I'm done for today!
 
 
Link to comment
Share on other sites

Good evening all

 

I found the answer here, thanks go to Carl, and thanks for looking into it,Shaun.

 

http://greensock.com/forums/topic/10063-how-to-controlplayreverse-to-a-specific-tween-inside-a-timeline-then-pause-after-animation/

 

You have to use TimlineMax's tweenFromTo which can 'scrub' the playhead between two labels.

 

So if I have a label "a" and a label "b" and "a" comes before "b" then tl.tweenFromTo("a","b") will in effect play the timeline as if it was in reverse with the difference that I now can stop when the playhead reaches the "a" label - whereas with the reverse() method you don't have the label control in that way (with reverse you can as far as I can see however control from where you want to reverse - which is different from wanting to control where you want to stop reversing to). (Unless I missed something in the docs)

 

So this worked just fine:

    var tl = new TimelineMax()


    var $frame1 = document.getElementById('frame1');
    var $txt1 = document.getElementById('txt1');
    var $txt2 = document.getElementById('txt2');


    tl.set($txt2, {
        opacity: 0
    })


tl.add("a",1)


tl.add("b",4)


    tl.add(TweenLite.to($frame1, 1, {
        alpha: 1
    }));


    tl.add(TweenLite.to($txt1, 1, {
        scaleY: 0,
        ease: Elastic.easeOut
    }, 2));


    tl.add(TweenLite.to($txt1, 1, {
        alpha: 0,
        ease: Elastic.easeOut
    }), "-=.7");


    tl.add(TweenLite.to($txt2, 1, {
        alpha: 1
    }), "-=.5");


    tl.add(TweenLite.to($frame1, 1, {
        backgroundColor: "#08b200"
    }),"-=1");


    tl.play();


    var callbk = tl.eventCallback("onComplete", doReverse);


    function doReverse() {
        tl.tweenFromTo("b","a")
        tl.remove(callbk)
    }



Thanks,
  • Like 3
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.
×
×
  • Create New...