ScrollTo question Please

[newguy123]

Hi GSAP Team and Community

 

I have this simple image sequence, with 4 different titles, coming up at specific frames. Each title div has an id of section1, section2 etc.

I have a button top left, which I've currentl set with a scrollto, to scroll to section2, ie I would expect the sequence to advance, and the 2nd title to come up.

...but the button appears to not do anything. In fact, if you refresh the page, and scroll, the titles show up, however if you press the jump button, nothing scrolls and the title are suddenly gone if you manually scroll....

 

I want to add a button in different places, for each section/title. However I'm just testing with 1 button for now.

 

See the Pen oNVJYex by newguy123 (@newguy123) on CodePen

[mvaneijgen]

The ScrollTo plugin scrolls to an element on the page, but your element is not part of the flow of the page anymore, because all the text are stuck on the middle and just get shown or hidden via an animation. 

 

So instead you want to animate to a point in the timeline, labels are great for that! You can just place a label on the timeline and then use a function like .labelToScroll() https://gsap.com/docs/v3/Plugins/ScrollTrigger/labelToScroll()/ to tell scrollTo the scroll to that label!

 

Side note: It is great that you've find all these demo's you can modify, but make sure you update the GSAP tools to use the latest versions! This usually solves 90% of the issues you might have

 

Hope it helps and happy tweening! .

 

See the Pen bGZOgQb?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[newguy123]

18 minutes ago, mvaneijgen said:

The ScrollTo plugin scrolls to an element on the page, but your element is not part of the flow of the page anymore, because all the text are stuck on the middle and just get shown or hidden via an animation. 

 

So instead you want to animate to a point in the timeline, labels are great for that! You can just place a label on the timeline and then use a function like .labelToScroll() https://gsap.com/docs/v3/Plugins/ScrollTrigger/labelToScroll()/ to tell scrollTo the scroll to that label!

 

Side note: It is great that you've find all these demo's you can modify, but make sure you update the GSAP tools to use the latest versions! This usually solves 90% of the issues you might have

 

Hope it helps and happy tweening! .

 

 

 

Nice one! Thanks

 

And thanks for the tip in checking the codepen is using the latest versions of the various plugins. I always forget about that part!