Jump to content


go to a specific panel

Moderator Tag
Go to solution Solved by GreenSock,

Recommended Posts

I am new to gsap and I don't speak English but I will try to translate my problem
If you scroll it takes you to the next panel and at the bottom of the timeline it turns the panel number yellow, but if you click a number on this line it takes you to that panel, but it doesn't actually scroll, so the color of the number doesn't change to that of the new panel and if you scroll it changes you back to the part you were in before you clicked
Do you have any idea how I could fix it?

I hope I made myself understood 😅

See the Pen oNoYzQw by marcoantonio-trujano-rodriguez (@marcoantonio-trujano-rodriguez) on CodePen

Link to comment
Share on other sites

  • Solution

You should just animate the scroll position so that everything is coordinated. Like this: 

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


If it were me, though, I'd probably reduce a lot of that code by using loops and reusable functions. When you find yourself writing the same code over and over again except changing one little part (like all those click event listeners), it's usually a good place to use code to automate/simplify that. You could probably do the same for even adding those <spans> to the DOM for the years but that's totally up to you. It's not "wrong" to do it manually. 


Good luck!

  • Thanks 1
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.