Jump to content
Search Community

Don't reverse tween in timeline

TrevorRice 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

Is it possible to target a specific tween in a timeline and not have it go in reverse when the timeline's progress is going from 1 to 0?

function createTimeline(progress, ...elems) {
    let tl = new TimelineMax({ paused: true });

      .fromTo(elems[0], 1, { x: '-100%' }, { x: '0%', ease: Power0.easeNone })
      .fromTo(elems[1], 1, { y: '100%' }, { y: '0%', ease: Power0.easeNone }, 'beginning')
      .fromTo(elems[0], 1, { x: '0%' }, { x: '100%', ease: Power0.easeNone, immediateRender: false })
      .fromTo(elems[1], 1, { y: '0%' }, { y: '-100%', ease: Power0.easeNone, immediateRender: false }, 'middle')

    return tl;

I am using a dragging/swiping callback to control the progress of my timelines, but I'd like to, regardless of the direction of the progress, have the tweens associated with elems[1] to always go from y:'100%' -> y:'0%' -> y:'-100%'. Right now, if the progress is going from 1 to 0, the tweens associated with elems[1] go from y:'-100%' -> y:'0%' -> y:'100%', which makes sense, but it's not what I'm looking for.


I can make a CodePen if that would help.


Thank you!



Heres a CodePen:

See the Pen ?editors=1010 by TrevorRice (@TrevorRice) on CodePen

Link to comment
Share on other sites

I'm a little confused - so let's say the timeline plays forward, you're fine right? And what exactly you you expect to happen if the timeline goes backwards? Are you saying the elements[1] object wouldn't change its state at all? So it'd remain stuck at -100%? And then what about when the timeline plays forward again? It still stays stuck at -100% or would it suddenly jump back to 100% and start moving again (but only if/when the playhead of the timeline is moving forward)? I just need some help understanding your goal here. You can certainly kill() that tween or pause() it anytime (maybe do it in an onComplete if you want it to stop working after the first play forward).

Link to comment
Share on other sites

Here's a CodePen:


Thanks for the replies guys. Sorry it took so long to get this Pen put together. Hopefully this will make more sense.


I tried stripping it down to only the essentials, but it is still bit complicated. Essentially what I am doing creating a little traversable carousel-timeline-thing that users will be able to interact with. Each large-box and small-box pair have their own Timeline. A Timeline with progress 0 indicates that the large-box will be to the left of the visible large-box container and the small-box will be below the visible small-box container. A Timeline with progress 1 indicates that the large-box will be to the right of the visible large-box container and the small-box will be below the visible small-box container.


So, I initialize all of the large boxes to the left of the visible large-box container and all of the small boxes below the visible small-box container except for the Timeline associated with the last item of each container, which has a progress of 0.5; meaning they are visible.


Now, pressing the Prev button will control the progress of the current timeline and the destination timeline causing the boxes to go in and out of view.


If you notice the large boxes go left and right and the small boxes go up and down depending on which button you click. What I want is for the current small box to ALWAYS go up-and-out and the incoming small box to ALWAYS come from below-and-in. I understand with the way it is built right now, progressing a Timeline from 1 -> 0.5 causes the transformation to be reversed. Is there a way I can avoid this? Would I have to nest timelines?

Link to comment
Share on other sites

I think here you have a case where playing and reversing the same timeline is not a good idea, especially because the reverse of the intro animation is not what you want.

I would recommend that you instead call functions that create the animations that you need when you need them. 


Your code is a bit complex for me to wrap my head around right now but maybe something like:

animateIn(box) {

 // create timeline that moves the current small box up and positions the requested "box" on the bottom and moves it up.

  • Like 3
Link to comment
Share on other sites

Yep, I've gotta agree with Carl (assuming I understand your question correctly). I believe you're overcomplicating things by trying to bend over backwards to reuse the same timeline to produce various different results. It's probably cleaner to just create the animation you need at the moment you need it. Don't worry - when a timeline finishes it'll automatically make itself eligible for garbage collection and the whole system is optimized for top-notch performance so you don't need to feel like you're doing something bad/wrong by firing off a new tween/timeline each time you need one. 

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