Jump to content

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

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

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() {        


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

Without being able to test it right now, what about putting a label at the two second mark and reversing back to that label? (maybe)

  • Like 1
Link to comment
Share on other sites

Also, a codepen would help tremendously.

  • Like 1
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.




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(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"


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

    function doReverse() {

  • 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.