Jump to content
GreenSock

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

Link to timeline position/label from another page

Recommended Posts

Hi there, 

 

Wondering if anyone can help with this one, as haven't been able to find anything in the forums just yet. 

 

I want to link to a position in my timeline when I navigate back to the homepage from another page on the site. 

 

Currently have an intro animation on the site, that we'd like to skip when clicking on the home button from the site navigation on other pages.

 

Is there a way to add an anchor link to the href that can seek a position?

 

Cheers

AJ

Share this post


Link to post
Share on other sites

Hey @AJT,

 

Welcome to the GreenSock Forum.

 

You could use a cockie.
Take a look at this example.
Your cockie would be 'homeVisited'
and the conditions as needed.

 

Happy tweening ...

Mikel

  • Like 1

Share this post


Link to post
Share on other sites

Hey AJT, welcome!

 

There are several ways to determine if a user has been to a page before. If you're loading pages normally (a whole new page every anchor click), cookies like mikel suggested or a query parameter would be the ways to go. If you're loading new content without a full page refresh as is relatively common these days, you could just set a state variable in your JS and use that.

 

In terms of the GSAP side of how to skip an animation depending on that information, there's a few options as well. You could have two separate timelines, one for the "intro" animations and one for the second part. The intro animation could call the second animation in it's onComplete. Or you could use the conditional logic to chain them or not from the start. Alternatively you could use one timeline for both parts, include a label in between the two, and tweenFrom that label.

 

Whatever you decide, it'd probably be best for you to give it a shot and then post again if you get stuck on something :) 

 

Happy tweening!

  • Like 2

Share this post


Link to post
Share on other sites

Hi Mikel and Zach, 

 

Thanks so much for taking the time to reply. First time I needed to post on the forums and your answers were both extremely helpful and provided the answers.

 

To help simplify the cookies I used this js library https://github.com/js-cookie/js-cookie, which made it a bit simpler to set and get the cookies.

 

From there, run a jquery check on startup to see if the cookies set, and if so seek the part of the master timeline required. 

 

Again, really appreciate the help, and the warm welcome to the community.

Cheers

Adam

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×