ScrollTrigger and click event button animation of content

[Priti Parikh]

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

[OSUblake]

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.

 

 

[Priti Parikh]

Hello there,

Thanks for quick reply,

but i want to achive something like this using gsap, slider with button

 

See the Pen NwLQyV by osublake (@osublake) on CodePen

 

is there any example look like this so i can follow and achieve my task, I am new learner of Gsap

 

Thanks lot for help

[OSUblake]

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.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger#demos

 

https://greensock.com/st-demos/

 

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.

 

[Priti Parikh]

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

 

Thanks

[akapowl]

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

 

[Priti Parikh]

Hey Man,

Thank you so much, You are rock star, i am going to try this way today. i am dam sure it should be work.