How to create draggable points of a path

[lunarsalvo]

Hi There,

 

I'd like to try an reproduce the logo animation like in the link below.

 

https://bibliothequedesign.com/projects/ollo/

 

I have no idea where to start, does anyone have any suggestions?

 

Thanks,

Salvo

 

[GreenSock]

That's a pretty cool effect indeed. Definitely not a simple thing to explain how to do, sorry. I think it boils down to Cubic Bezier points that have some physics applied affecting their positions in relation to each other. I wish I had time to do a whole tutorial, but it's no simple task. 

[lunarsalvo]

Ok,

Starting from the very basics, would you know how to modify the points of a Cubic Bezier? Or would you be able to point me towards a good tutorial?

[OSUblake]

You might want to look for a physics library that does verlet integration. That's probably what drives most of the animation, and three.js is probably used for the 3d graphics.

 

Toxiclibs

http://haptic-data.com/toxiclibsjs/examples/thread

 

Verlet.js

https://github.com/subprotocol/verlet-js