Click to anchor in timeline

[Dave Dublin]

Hi

Is it possible to click to a point in the timeline animation?

I tried to utilise the following code but I think I am missing something.

Should I be using Labels?

The idea is that you can click on the number and it will scroll to the card

 

gsap.utils.toArray(".nav a").forEach((a, i) => {
      a.addEventListener("click", e => {
        e.preventDefault();
        gsap.to(window, {scrollTo: i * innerWidth})
      });
    });

 

See the Pen dyeYdRK by davedublin (@davedublin) on CodePen

[GreenSock]

You really don't need jQuery. It's a waste in this case and you're eating up a lot of resources with that scroll event handler. Here's a version that shows a different approach: 

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

 

FYI, there are some helper functions in the docs related to getting scroll positions although they don't necessarily fit this case (I just wanted to let you know they are there): 

https://greensock.com/docs/v3/HelperFunctions#getScrollPosition

 

I hope that helps!

[Dave Dublin]

Wow brilliant, thanks so much. That's working much better now.

Thanks

Dave