ScrollTo pin & anchor

[Sukru]

Hello, I did what I wanted to do, at least partially, but I could not make it work as I wanted. When I scroll to the next section, I cannot change the number, but I could not go back to the previous section and did not change the numbers in the buttons. Can you help me?

 

See the Pen mdgbVxR by sukruemanet (@sukruemanet) on CodePen

[Rodrigo]

Hi,

 

The simplest way I can think of this is to use a call method and a loop:

https://gsap.com/docs/v3/GSAP/Timeline/call()

https://gsap.com/docs/v3/GSAP/Timeline#positioning-animations-in-a-timeline

 

Here is a simple demo showing that approach:

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

 

Hopefully this helps.

Happy Tweening!

[Sukru]

Thank you very much @Rodrigo  It's perfect now but when you click on the buttons the content doesn't go away. What could be the reason?

[Rodrigo]

IDK, my demo doesn't have the buttons functionality because I thought you had that working in your setup already, since your demo has it, I left it out.

 

I'll try to revisit the demo and add that feature to the demo but there are other demos that show how to use the ScrollTo Plugin to update ScrollTrigger controlled timelies:

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

 

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

 

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

 

Hopefully this helps.

Happy Tweening!

[Sukru]

@Rodrigo Hello again, it is there in the installation, yes it is there, but when redirecting with href, #id, it goes with href in the examples he gives. However, I am shown as before and after. I thought it was dynamic, is it possible to do this in your own example?