Search code examples
javascriptd3.jshtml5-canvasgsaphtml5-animation

Canvas HTML5 animation with GSAP/d3.js

I want to create a HTML5 canvas animation likely the one on this site: https://flowstudio.co/.

I have started with GSAP, but it looks like creating something like this, is really a big task. I have to create mostly every point/move singular and i have no idea if there is a faster/better way. Currently i only have looked at GSAP without plugins. Is there some special tool/(GSAP) plugin that can help to create this? Or should i maybe use d3.js?

I also tried to find an tutorial for this, but it looks like there is nothing for this more advanced case.

Thanks for the help!

Solution

    1. The example you provided is using THREE.js and I would suggest you to use it too since you want to operate in 3D space also.

    2. When you want to animate a large ammount of points you will need to use a vertex shader. That's because vertex shader will allow you to calculate all of the points positions in one step (thanks to parallel computing on the GPU), whereas doing it the 'normal way' (on the CPU) is very bad on performance, since every single point has to be calculated one by one. (here you can see the difference)

    3. The way you animate the points is a little different than you might think- you don't want to apply animation to every. single. point... Instead you will need three things that you will pass to the shader:

      -array containing starting points position,

      -array containing final points position,

      -blend parameter (just a float variable taking values from 0 to 1).

      Then you use GSAP to animate only the blend parameter, and shader does the rest (for example when the blend parameter is 0.5 the point position is exactly halfway between starting position and final position that you provided to the shader)

    4. The example you provided is also using some kind of Perlin Noise function which you will have to implement in the shader also.

      Its a lot to bite at one time but here's some great tutorials from Yuri Artyukh which will help you achieve something similiar:

      https://www.youtube.com/watch?v=XjZ9iu_Z9G8&t=5713s

      https://www.youtube.com/watch?v=QGMygnzlifk

      https://www.youtube.com/watch?v=RKjfryYz1qY

      https://www.youtube.com/watch?v=WVTLnYL84hQ&t=4452s

      Hope it helps and...good luck!