Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Brittany@Decisely

Anchor link that scrolls to end of timeline attached to scrollbar

Recommended Posts

I feel like I may be overthinking this... 😬 I have multiple sections on a page, each with their own timeline, all of which are attached to the scrollbar via ScrollTrigger. The trigger for each section is the ID of the section's container, and the timelines start at the top of each container.

 

I'm trying to set up a fixed navigation with anchor links for the user to navigate between these sections. The problem I'm running into is that when you click on a nav link, it scrolls the user to top of the container, which is the start of the timeline. Since the timeline is attached to the scroll bar, the user will then have to scroll to play out the rest of the timeline (which I feel is not always intuitive enough). 

 

Is there a way to link to the end of the timeline of a section? I tried putting a hidden element at the end of each section for the anchor link to link to... but that doesn't always play out the whole animation. I also thought about making separate timelines (but I feel like that's too much work for something that probably has an easier solution). Am I missing something?

See the Pen xxZRjeV by abitofbrit (@abitofbrit) on CodePen

Link to post
Share on other sites

Hey Brittany.

 

5 minutes ago, Brittany@Decisely said:

Is there a way to link to the end of the timeline of a section?

I don't understand this question. Can you try to rephrase?

 

6 minutes ago, Brittany@Decisely said:

I tried putting a hidden element at the end of each section for the anchor link to link to... but that doesn't always play out the whole animation.

I'm guessing that has to do with where the end of your ScrollTrigger is in relation to where the clicked element is. But without seeing it it's hard to say. This sort of approach is definitely the right way to do it (or use the element's offset + the element's height to do the same).

Link to post
Share on other sites

Here: 

See the Pen xxZRjeV by abitofbrit (@abitofbrit) on CodePen

 

You'll see that if you click on the anchor links at the top, it takes you to the top of the container, which is the "top"/start of the timeline. Because the timeline is attached to the scrollbar, the user will then have to scroll down to see the timeline play out - which isn't necessarily intuitive... so I'm wondering if there's a way to have it link to the end of the timeline for that section.

 

(To note: the only exception to the rule is if the anchor takes you up to a section instead of down to a section.)

Link to post
Share on other sites

@ZachSaucier - You are awesome! Thank you! :) I'm still learning the ins-and-outs of GSAP, so I'll need to familiarize myself a little more with the properties and methods.

Link to post
Share on other sites

Just to follow up: for whatever reason, I couldn't get it to work. :( Included the ScrollTo plugin, and it kept going to the end of the section, completing the timeline, then snapping back to the top of the section. This isn't specifically GSAP, but I rewrote what you gave me in jQuery and made it into a function that refreshes on window resize. This got it working, but I definitely appreciate you pointing me in the right direction!

 

(PS: a.p-nav-dot is the equivalent of nav a in the project I'm working on)

 

$("a.p-nav-dot").each(function(i){
  var clickElem = $(this).attr('href');
  var offset = $(clickElem).offset();
  var oHeight = $(clickElem).outerHeight();

  $(this).on("click", function(){
    $('html,body').animate({
         scrollTop: offset.top + oHeight * (i + 1),
    }, 1000);   
  });
});

 

Link to post
Share on other sites

Why use jQuery's animate if you're already loading GSAP? Even if you're going to use jQuery's calculations instead of the ones built into JS I wouldn't use jQuery's animate because it's slow and limited in what it can do.

Link to post
Share on other sites
1 hour ago, ZachSaucier said:

Why use jQuery's animate if you're already loading GSAP? Even if you're going to use jQuery's calculations instead of the ones built into JS I wouldn't use jQuery's animate because it's slow and limited in what it can do.

 

The calculations are the same; I just couldn't get the ScrollTo plugin to cooperate. It kept scrolling to the end of the container and snapping me back to the top of the container. I'll take another look at it today to see if I can get it to work. I'll keep you posted!

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.

×