Jump to content
Search Community

ScrollTrigger and click event button animation of content

Priti Parikh test
Moderator Tag

Recommended Posts

Hello Folks,

Here is my code pen url, on ScrollTrigger  animation my header text and it should working fine with mycode(Note when scrolldown and Up event)

but when i click on button it's show related content like button1 click show heading 1 but after button click when scroll again it's overlapping

all content, how i can restart trigger after button click, or which is best way to do to manage button click and scroll event work  together smoothly. can you please help me on this it's really help me to

See the Pen MWQaamx by pritiparikh2 (@pritiparikh2) on CodePen

Link to comment
Share on other sites

Welcome to the forums @Priti Parikh


Before continuing any further, you should refactor your code as you have nested timelines, which is going to mess stuff up. Please check out the Most Common ScrollTrigger Mistakes article, especially the part about nesting ScrollTriggers inside tweens.



Link to comment
Share on other sites

There's lot of demo on the ScrollTrigger docs if you scroll down the demos sections. There are way too many links to post here.






ScrollTrigger Showcase - a Collection by GreenSock on CodePen


I would recommend to start out small. Don't worry the buttons yet. Get your ScrollTrigger animations working first, then add in more features like the buttons.


Link to comment
Share on other sites

Hi Thank you so much for your quick Reply


see I have created simple demo with fade in fade out effect, and it's working fine now i need button to work over here

which can go to particular slide and even work scroll effect, is there any quick solution for this


here is link : 

See the Pen MWQaBbZ by pritiparikh2 (@pritiparikh2) on CodePen



Link to comment
Share on other sites

Hello @Priti Parikh


Here is one way you could do it:


Give every ScrollTrigger that you are creating in the forEach loop an id, and then you can get that ScrollTrigger by its ID and use its start as the position you want to scroll to - I added 1 (px) here to make sure, that the fading-in is actually triggered.


function gotoslide(index) {
  var headingId = "heading-st-" + (index - 1);  
  gsap.to(window,  { scrollTo: { y: ScrollTrigger.getById(headingId).start + 1, autoKill: false } } );



Some more notes:

  • You forgot to load the ScrollTo-Plugin - make sure you load it if you want to use it, and best also register it.
  • I changed some things in the demo below, which originally is from this thread here


  • There are no GSAP tweens/timelines directly associated with the STs in the demo, but only tweens that are being triggered in the callbacks, so I swapped those out for the ScrollTrigger.create() method.
  • The start(s) of the STs had a relative value ( "+=" ... ) which, although it doesn't break anything, technically is not valid, if I'm not mistaken.

Those are just some minor suggestions - you are of course welcome to change them back if you really need the ScrollTriggers to be attached to tweens/timelines. I just figured it wasn't neccessary, so I changed it here :)  I hope that will help. Happy scrolling!


See the Pen rNJOrga by akapowl (@akapowl) on CodePen


  • Like 3
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...