Share Posted July 7, 2020 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 More sharing options...
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
Already have an account? Sign in here.Sign In Now