some issues using gsap scrollTrigger

[rlaydtjs]

GSAP is pretty awesome. I have a great site thanks to them. 

I'm having some issues, can you help?

1. Currently, if you look at my 'codepen' example, the .box element is zooming right in upon entering start. But I want to increase the exposure time of 'pinned text'. For example, I want the boxelement to zoom in when I scroll about 100px after the 'pinned text' is pinned.

2.  Is there any way to revert to the original size when scrolling up from the end point without using the 'scrub' animation?

3.  For lack of a better word, I want to increase the distance between the 'start' and 'end' points. In other words, I want the box to get bigger, and I want to scroll more before moving on to the next section.

4. And the biggest problem is that when the user scrolls fast, they can easily pass by section 2. Is there any way to solve this?

Unlike the 'codepen' example, the real project is using React and UseGSAP(), so I couldn't find a way to solve it from the documentation alone, so I left a question. Thanks.

See the Pen YzMOorG by seankim1111 (@seankim1111) on CodePen

Edited April 17 by rlaydtjs
Add item #4 and change the title.

[mvaneijgen]

Let's keep it simple and tackle your question in parts otherwise it will be really complicated to explain. 

 

Indeed it is a bit weird to wrap your head around. Normally in GSAP things work based on durations, but with ScrollTrigger that all gets thrown out the window (not really it still matters if you have multiple animations), but in ScrollTrigger the whole animation gets played over the scroll distance you've set.

 

Right now I've enabled scrub again and set your ScrollTrigger end to center (the same as start) and add +=6000px to it eg the scroll distance now gets span over 6000px. There are now two tweens on your timeline one that does nothing for 0.1 seconds and your other tween that scales the .box and takes 0.5 seconds (default if you don't set a duration), so your total duration = 0.6 seconds the distance is 6000px which means every 0.1 seconds = 1000px, so the first tween does nothing for 1000px, then your last tween takes 5000px to do its thing.

 

If you don't want things to happen on scrub you'll have to create multiple ScrollTriggers that get positioned like you want eg 100px further then the first ScrollTrigger and that all control their own elements. ScrollTrigger has build in toggleActions  (see the docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/) which you can tell what to do based onEnter, onEnterBack, onLeave, onLeaveBack, but you can also fully manually define your logic in these callbacks.

 

Check out this amazing tutorial if you want to learn more. Hope it helps and happy tweening! 

 

 

 

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

[rlaydtjs]

So you can't have rewind and expand all at once without creating multiple ScrollTriggers.

[mvaneijgen]

Everything is possible with GSAP, but their is a lot build in that you get for free, and if you want things to happen differently you have to build the logic your self. I really recommend watching the video and see what logic you can apply to your setup and post back here with what you've tried when you get stuck.

[rlaydtjs]

I'm missing some code from the React code migration. There are a lot of things to do, but it's hard to execute right away. Thanks for the guide.
If anyone has a better way, please let me know. I'll review it positively!

[mvaneijgen]

I think something like this is what you're looking for. I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

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

 

For React, if you have set up the useGSAP() hook correctly and your elements have the same classes and CSS everything should just be a drop in replacement from Codepen. Be suer to check out the following if you need some more guidance. If you're stuck we also have  Stackblitz starter templates  for all the major frameworks. Again hope it helps and happy tweening!