Jump to content
Search Community

Reverse timeline? (again... sorry...)

Robert Wildling test
Moderator Tag

Recommended Posts

I am quite a bit embarrassed to have to ask this question again, but I am so totally stuck that I hope you find some patience with me... hopefully!

 

it is about reversing an existing timeline that is saved to a variable, quite like this:
```js
const mainTl = () => {

    const tl = gsap.timeline({ paused: true })

    [...]

    return tl

}
```

While this works, when called directly within the flow of the code:
```js
mainTl().play(0)
```

the same function as well as `mainTl().reverse(0)` won't work, when called from a button.

 

I did read the documentation and search through the forum here, but my light hasn't gone on so far. Can someone please switch it on?
Thank you in advance!

See the Pen abvMWpx by rowild (@rowild) on CodePen

Link to comment
Share on other sites

Hey Robert.

 

Why are you setting up your timeline like that? Every time you call mainTl() a new timeline is created. That's not optimal to say the least :) 

 

Secondly, any number that you pass into a control method like .play() or .reverse() changes the timeline's playhead to that position. So a value of 0 in a .reverse() doesn't make much sense because you're saying "Go to the very beginning and then reverse". Do you see what I mean? So you probably just want to do mainTl.reverse().

 

If you want to always reverse from the very end you could do something like this:

mainTl.progress(1).reverse()

See the Pen VwvRWeb?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

Yeah, I wouldn't be creating timelines on click like that. It's almost always best to create everything ahead of time. 

 

One minor clarification: reverse(0) does reverse playback from the end of the timeline. You can also use negative numbers to start your reverse relative to the end of the timeline. For example, reverse(-2) would reverse playback 2 seconds before the end of the tween/timeline.

 

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

Thank you, @ZachSaucier , for your quick and helpful response!

 

The reason, why I setup the timeline within a function, is that there is stuff going on before this timeline is build (like text is wrapped in spans...). Elements are simply not available before this process is finished. So I put everything into a function and into another script (also to save space). This very function is then called from an onComplete event of another timeline.

 

I only need it during page build-up. Well... that's what I thought. Now I would also like to use it in its reverse manner before unloading the page... hmm...

 

I am also confused about the "(0)": It is clear to me that a timeline jumps to the beginning, when a zero is passed to the `play()` function. But I consequently thought that, when passing a 0 to the `reverse()` function, it would automagically jump to the end of the timeline. But that does not exist, right? (I am aware of the `progress(1)` function and also tried it - honestly! But since my whole setup doesn't work, I tried reverse(0), too...)

 

 

Any idea how to build a timeline from an `onComplete` call? Without using a function? Or maybe better: with using a function properly?

 

Link to comment
Share on other sites

@PointC Thank you!

The fact that the timeline is created after a click on a button here is only due to the fact that this is a reduced example. In my scenario, the timeline is build after an onComplete call from another timeline, which is necessary, because beforehand DOM elements are added that are not available right away.

Of course: if there is a better solution  I am all ears!

Link to comment
Share on other sites

Thank you, guys, for kicking my few lonesome little gray brain cells! You are awesome!

 

May I just ask for a professional feedback at what I came up with now. 

 

it seems I can get the code working, when I define the variable for the timeline to be created beforehand, as an empty timeline, so-to-say. Then, a call to the "buildsecondTimeline" function would setup all the gsap needed.

 

Fantasy code:
 

// Define empty timeline beforehand:
const timelineToBeBuild = gsap.timeline()

// the onComplete of this function calls  buildTimeline to create the second timeline. 
const firstTimeline = gsap.timeline({ onComplete: buildSecondTimeline })

// second timeline needs to be "wrapped" into another function,
// otherwise it is executed right away
const buildSecondTimeline = () => {
  timelineToBeBuild.to([...])
    .add([...])

  // This return is not necessary... 
  // return timelineToBeBuild
}

// Call `timelineToBeBuild` directly
btn.addEventListener('click', (e) => {
  timelineToBeBuild.progress(1).reverse
})


I edited the codepen accordingly:

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



It seems to work. I just wonder, if that is the way to go? Or are there still pitfalls I am not aware of?

Link to comment
Share on other sites

I don't know that I follow everything, but that looks okay to me. You may not want to add the button event listener for the second timeline until it's built. You could move that to the buildSecondTimeline function. 

 

Just FYI in your updated demo, you'd need to use play(0) or restart() if you want the user to be able to play it again before reversing. (No idea if that's the goal - just throwing it out there.) 

 

Happy tweening.

:)

 

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