Jump to content
Search Community

Anchor link that scrolls to end of timeline attached to scrollbar

Brittany@Decisely test
Moderator Tag

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 comment
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 comment
Share on other sites

Here: 

 

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 comment
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);   
  });
});

 

  • Like 1
Link to comment
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 comment
Share on other sites

  • 2 years later...

It's pretty tough to troubleshoot without a minimal demo - Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

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