Jump to content
Search Community

Timeline help

Torben 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

I have a timeline which I need to be able to reverse and redo when the browser is resized because some of the tween values are set to window height.

The issue I have is after a resize where I do a seek. The next time I goNext() the animation doesn't play.

Is it the pauses?

 

What am I doing wrong or is there are smarter way?

var tween, currentNo;

function createTween() {
    tween = new TimelineMax({paused:true});
    tween.addLabel('0');
    tween.add( TweenMax.fromTo($images, 1, {y:0}, { y:(-1 * $(window).height() }));
    tween.addPause();
    tween.addLabel('1');
    tween.add( TweenMax.to($images.find('.image-blurred'), 1, { opacity:1 }));
    tween.addPause();
    tween.addLabel('2');
    tween.add( TweenMax.to($images, 1, { y:(-2 * $(window).height() }));
    tween.addLabel('3');

    
    tween.seek((currentNo.toString()));
}

function onResize() {
    createTween();
}


function goNext() {
    if (currentNo === 3) return;
    tween.play();
    currentNo++;
}

function goPrev() {
    if (currentNo === 0) return;
    tween.reverse();
    currentNo--;
}
Link to comment
Share on other sites

It would be best if you provided a CodePen demo so that we could test what is happening.

More info on that here: http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

It appears that you are seeking to a label that occurs at the same time as an addPause().

As soon as the playhead gets to the label, BAM, addPause() kicks in.

 

One solution is to play slightly past the label.

tween.play(currentNo.toString() + "+=0.00001");
  • Like 1
Link to comment
Share on other sites

Hi,
 
Yep, you can add a position argument to the addPause() method, as well as a callback, params and scope, check the docs:
 
http://api.greensock.com/js/com/greensock/TimelineLite.html#addLabel()
 
You could also add the pauses relative to the labels. In my opinion is always better to work relative to labels, sure if the instances are added to the end of the timeline everything gets shifted automatically if the duration of one or more instances changes, like in your code, but is always a good practice (even if it's a little redundant or you don't end up using them) specially when you work with specific positions in a timeline (whether absolute or relative).
 
It could be like this:

tween.addPause("0+=0.00001");

In this case the fact that both parameters are numbers is not an issue, because you're passing them as a string, another neat trick under GSAP's sleeve

Also keep in mind that seek honours the current state and direction of the timeline, so if your timeline is currently reversing after the seek() method it'll be still reversing and viceversa, and if the timeline is paused, after the seek() will remain paused.

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