ScrollTrigger Directionally Smart

[aeroldb]

Hello. I was wondering where could I find a similar example to the effect of the directionally smart that can be found here 

I'm trying to make a website where the direction of the stars will go in a different direction infinitely.

Thank you very much!

[GreenSock]

Welcome to the forums, @aeroldb. 

 

There are tons of demos at https://greensock.com/st-demos

 

And the docs are at https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Why don't you give it a shot and then if you get stuck, pop back here with a minimal demo (like a CodePen) that we can take a look at and answer your GSAP-specific question(s)?

[aeroldb]

On 7/9/2022 at 1:38 AM, GreenSock said:

Welcome to the forums, @aeroldb. 

 

There are tons of demos at https://greensock.com/st-demos

 

And the docs are at https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Why don't you give it a shot and then if you get stuck, pop back here with a minimal demo (like a CodePen) that we can take a look at and answer your GSAP-specific question(s)?

Hello!

here's the codepen:

See the Pen ZExeaBJ by aeroldb (@aeroldb) on CodePen

So what I'm trying to do is when I scroll to another section. The direction of the boxes will change to all boxes going down the screen(it will stop going to the right and the direction of the animation changes). When I go back to the previous section. The animation for the boxes will go back to section 1 animation(which is all boxes going out of the screen to the right). When I scroll back up, the whole resets too, which shouldn't, I want it to be smooth. How do I fix this? Thank you very much! I'm still learning gsap

[Cassie]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

If I were you I'd approach this with single tweens per box and overwrite:true or auto. Maybe just focus on trying to swop one box between two different directions without scrollTrigger, then add some more boxes, then add in a ScrollTriggers with some callbacks and swop the direction over in the callbacks.

Timelines are pre-calculated and a little less flexible for this sort of thing whereas tweens can be a bit more dynamic.

Hope this helps a bit!

[GreenSock]

This thread may be helpful too:

 

You could easily tie the timeScale() to scroll direction (and remember, a negative timeScale makes it go in reverse). 

[aeroldb]

Thank you for the examples! I'm getting some good ideas on "How To"