Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Nysh

Return to initial state of timeline from another timeline

Recommended Posts

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

Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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 

Link to post
Share on other sites
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 :) 

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

×