Jump to content
GreenSock

aeroldb

ScrollTrigger Directionally Smart

Recommended Posts

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!

Link to comment
Share on other sites

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)?

Link to comment
Share on other sites

  • 2 weeks later...
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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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). 

Link to comment
Share on other sites

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

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.
×