Return to initial state of timeline from another timeline

[Nysh]

Hey legends!

Thanks for all the amazing work y'all do. Absolutely loving the GSAP journey.

 

I have the following challenge:

 

- I'm trying to create a form that always opens on page 1.
- Once open, the user can then click back and forth between the pages

- If they close the form from page 2 and then reopen, it opens on page 1 again.

- The page section animation has a matchmedia associated with it as well (thanks to Blake!) 

 

I've got reduced test case, which almost works. I've built 2 timelines (1 to open the form and 1 to switch pages). The problem lies somewhere in my approach/logic. After closing the form from page 2 and reopening it, it successfully opens on page 1, because I’m using onComplete tl.seek(0).reverse().

 

HOWEVER, once reopened, the click event to swap pages does not work on the first click and requires the user to click "next" again to switch pages. My goal is to get it to swap pages on the first click. Hopefully that makes sense.

Any help on how to approach/fix this would be greatly appreciated

 

Much respect

See the Pen QWyejRL?editors=0010 by Nysh (@Nysh) on CodePen

[ZachSaucier]

Hey Nysh and welcome to the GreenSock forums. Thanks for the pretty minimal demo.

 

The issue here is that you are not updating the reversed variable that you created but you're using that to control the timeline's state. There's no need for that variable, just use the control methods on the timeline itself to detect and control the reversed state:

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

 

Side note: I don't know how you can work with unformatted code like that, haha.

 

Also, we recommend including the duration inside of tweens' vars parameter so that you can use features like GSAP's defaults.

[Nysh]

Hi Zach,

Thanks so much for that.  That makes sense. 

Yeh soz I come from a design background, and I've just started learning about JS, hence the messy code. Will endeavour to format it properly in the future.  Do you suggest using an extension like like Prettier for visual studio code ?  I should probably learn to format myself manually anyway thought right lol. soz for the noob questions. Also, I'm facing another issue with ScrollTrigger, best to post it as new topic yer?

Ta,
Nish 

[ZachSaucier]

13 minutes ago, Nysh said:

Prettier for visual studio code ?

Prettier works. I use Beautify. 

 

13 minutes ago, Nysh said:

I should probably learn to format myself manually anyway thought right

Yes, I recommend that  

 

14 minutes ago, Nysh said:

I'm facing another issue with ScrollTrigger, best to post it as new topic yer?

Probably. I highly recommend making a demo that only has relevant code related to that issue