Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
iDVB

GetVelocity + Directionality of a Fixed position element

Recommended Posts

https://codesandbox.io/s/heuristic-dew-84ys4?file=/src/MetaballSwarm.js

 

We have the "effect" that we want working..... but the problem we're struggling with is how to get it to work in our usecase.

In the example above, you can see that moving the grouped balls causes them to separate the faster you move. 

 

However, in our case, we want the separation to be fixed to the center-center of the screen, so that as you scroll fast down... the balls start to separate from the center upwards. Then when you stop scrolling the balls reposition themselves center-center again.  

 

This allows us to only have a canvas the size of the viewport and NOT the size of the page. So we are faking that the circle is traveling down the page with this same effect of spreading.  

 

Our Thoughts:

Maybe the solution is something like tracking the direction the ball is moving in the viewport and then using it with the velocity of the scroll animation in order to create that spread, while still keeping the origin of the balls in the center.  

 

Is there some way to create a loop that constantly is giving an element a NEW tween destination that is constantly changing? Seems like maybe a perf anti-pattern though? Maybe that could be used somehow?

 

I hope that makes some sense. It was even confusing to write.

Link to comment
Share on other sites

Hey iDVB. Neat effect!

 

It sounds like you're wanting to use the same basic approach that we use in the cursor follower in the quickSetter docs. Only instead of following the cursor, it'd move based on the scroll velocity. And instead of one object with one speed you'd have multiple objects each with their own speed. 

 

21 minutes ago, iDVB said:

Is there some way to create a loop that constantly is giving an element a NEW tween destination that is constantly changing?

So long as you're killing off (overwriting) the previous tweens it's fine. Or just set it using .quickSetter but then you're in charge of any tweening that you have (like the cursor follower demo shows).

 

Hopefully that's enough to get you started :) Feel free to ask if you have questions.

Link to comment
Share on other sites

Definitely include overwrite: "auto", or overwrite: true, on your tweens. You can set that as a global default if you want: gsap.defaults({overwrite: "auto"});. Besides that nothing sticks out.

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