Scrolltrigger click and scroll to content

[xZorro_81]

Hi!

 

How do I make scrolltrigger scroll to an item when clicked? I have a buggy version working but I don't think it's the right way to do it because it misses a lot of things. 1. 1.When I click on an item, there's a tiny delay before it makes that item active and switches to the content

2. The onclick function is independent of the scroll function. So when an item is active when clicked, and then I scroll it doesn't go to the item but it starts again where the scroll was last left. 

3. also is there a way to add some more friction when scrolling through the items? Right now when I scroll fast, it breezes through the items. I want to add some pause/friction. 

 

Any help is appreciated thank you!

 

See the Pen LYXVExZ by zorromaster (@zorromaster) on CodePen

[mvaneijgen]

It seems like you're trying to overwrite what ScrollTrigger is already animating. This will not play nice if a user first scrolls then clicks and then goes back to scrolling again. You almost never want to overwrite tweens you're already created, you can only do this if you're a 100% sure of what  you're doing. 

 

Here is an example from https://greensock.com/st-demos/ using the scrollTo plugin, with this plugin it allows you to scroll to certain parts of your page and thus ScrollTrigger will just animate things like it would also do if a user scrolls, so no need to create multiple animations that do the same thing. You can do this like the demo is showing, or you can use labels in your timeline to navigate to check out https://greensock.com/docs/v3/Plugins/ScrollTrigger/labelToScroll()

 

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

 

You can add a empty tween to your timeline to have it do nothing x amount of seconds, with something like this, but this will not work in your current setup, because you have 0 duration tweens which all start at the same time.

 

.add(() => {}, "+=5"); // Add pause of 5 seconds

 

If you want 0 duration tweens just use a .set() function or better change the easing of a normal animation ease: "steps(1)" this will make the transition instant, so it will have the effect you're after, but you keep all the control of the timeline. https://greensock.com/docs/v3/Eases

[xZorro_81]

hi @mvaneijgen

 

That is perfect, thank you so much!! labelToScroll was what I needed to make it work along with .set() function.

[Shuvo]

On 6/13/2023 at 11:21 AM, mvaneijgen said:

It seems like you're trying to overwrite what ScrollTrigger is already animating. This will not play nice if a user first scrolls then clicks and then goes back to scrolling again. You almost never want to overwrite tweens you're already created, you can only do this if you're a 100% sure of what  you're doing. 

 

Here is an example from https://greensock.com/st-demos/ using the scrollTo plugin, with this plugin it allows you to scroll to certain parts of your page and thus ScrollTrigger will just animate things like it would also do if a user scrolls, so no need to create multiple animations that do the same thing. You can do this like the demo is showing, or you can use labels in your timeline to navigate to check out https://greensock.com/docs/v3/Plugins/ScrollTrigger/labelToScroll()

 

 

 

 

You can add a empty tween to your timeline to have it do nothing x amount of seconds, with something like this, but this will not work in your current setup, because you have 0 duration tweens which all start at the same time.

 

.add(() => {}, "+=5"); // Add pause of 5 seconds

 

If you want 0 duration tweens just use a .set() function or better change the easing of a normal animation ease: "steps(1)" this will make the transition instant, so it will have the effect you're after, but you keep all the control of the timeline. https://greensock.com/docs/v3/Eases

How to make it vertical

[mvaneijgen]

@Shuvo can you make your own topic and provide a minimal demo with what you've tried? also can you elaborate more on "How to make it vertical"?

[Rodrigo]

Hi @Shuvo and welcome to the GSAP forums!

 

Maybe something like this:

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

 

Hopefully this helps.

Happy Tweening!