Jump to content


Change Bezier Point Values midrace

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have a stream of particles that I need to control. I have achieved to hide the amount when dragging a controller, but I would also need to change some of the bezier-points to change the course of the particles.


I made a codepen to illustrate (the bar is the controller, you can drag it up and down)


Is there a way to achieve this?


Thank you!

See the Pen yyEmvY by ppdc (@ppdc) on CodePen

Link to comment
Share on other sites



Thanks for the codepen, nice effect!!


Unfortunately, for optimization reasons, as far as I know there's no method that can update the values of an instance that are fed to a plugin, the Bezier Plugin in this case.


One option would be to pause and kill the current instance the instance, record it's progress, clearProps the target and then create the tween again and advance it to the progress it had when it was paused, something like this:


See the Pen rarBrK by rhernando (@rhernando) on CodePen


Although for a bunch of particles this might not be the best scenario, you could get some ugly flashes of the particles shifting from one position to another.


Another option could be to create a tween that changes the top/left positions of the particles. Since the Bezier Plugin is using X and Y there won't be an overwrite conflict. That particular tween had to be paused and you can change it's progress using the onDrag callback, like this:


See the Pen Batoc by rhernando (@rhernando) on CodePen


Hopefully this can help and perhaps other users can come up with a better solution, but as you already know is not an easy issue.




PS: I forgot to post this link, it might help a bit:


See the Pen Kajpu?editors=001 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

Hi Rodrigo,


well, thank you and thank you for your suggestions.


Option two sounds less complicated but wouldn't I be moving the complete Tween?



Link to comment
Share on other sites



You're welcome.


As I mentioned this is not an easy scenario, not the most complicated but the workaround has it's shortcomings. In fact from the moment you modify the top/left of the element, the starting point of the bezier path changes as well, is still the same path, but since X/Y are different from top/left the bezier path will look completely different. If you want to keep the start and end points and change what's between, the only way I see is the first suggestion. As I mentioned it might not look very good:


See the Pen ZYjYjO?editors=001 by rhernando (@rhernando) on CodePen


But if you're able to combine that codepen with this one:


See the Pen Aydqu by rhernando (@rhernando) on CodePen


I believe the results could be more acceptable. Think about it this way: pause every particle onDragStart, onDragEnd do what's on the first codepen (change bezier path) except (this is the difference maker) the set() instance that's used to clear the inline styles of the elements, that should be done later. Instead of that record the element's current X/Y in an object in the element's namespace (just like the animation). Then change the instance to the new bezier path and tween each element from the recorded X/Y to the new bezier position using a from() instance and on complete start the animation again.


Unfortunately I don't have time to create that sample right now, but hopefully this would help you getting started.



Link to comment
Share on other sites

Yes, Rodrigo is exactly right. 

The API doesn't support tweening Bezier values directly while a tween is running.

It is possible to do, but it is quite tricky.

One problem is that two Bezier paths with the same number of points can be drastically different lengths and look totally different. Not always going to be possible to smoothly transition between them both.


I took a stab at this earlier in the day and it seems Rodrigo and I think very much alike (good for me) :)

I also used the technique of recording the previous progress() of a Bezier tween and then applied it to a new one.

I found that also incrementing the progress slightly helped a little.


I added a little code that helps visualize the path by placing dots along it




For the record I was inspired by Rodrigos excellent example here: http://codepen.io/rhernando/pen/AydquIt was the first thing I looked at today when researching this;)


Rodrigo, I'VE MISSED YOU! Welcome back!

  • Like 2
Link to comment
Share on other sites

Rodrigo and Carl,


thank you both very much, this forum never fails to amaze me.


I only had a glance at your examples (it's 23:30 here), but that looks very much like the way to go!

I will dive into it tomorrow and hopefully come up with a solution.


Thank you very much!



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.