006 - SVG's & Anime.js

Date: June 3rd 2020

Goign to playing around with SVGs and anime.js. Using this nifty SVG line creater SVG Path Builder I made a path and drew it below

Now I've added a second blue svg path and using the timeline function to link the two paths together. These animations can be chained together using the .add({}) There is still a bit of a problem with the animation instantly jumping to the next start, which could either be ignored and the paths lined up, or another animations added between them.


Now lets see if we can add a button and add a new svg each time I press it.

This doesn't work because the useEffect() rerenders each time a new id is created. Instead I think I need to break this up into seperate components that each deal with their own rendering and have the path and id passed into them.

Ta Da! That wasn't too hard. For this, I made a new component that took in the id and a string reference to the path. Inside the component I was able to then animate each piece individually without reloading the others. In this way each component deals with its own animation and complete state and can then pass wheather its finished or not onto the next part of the state. There are two ways this could be implimented now:


For now, lets try use the callback function to trigger a second animation

Using the complet: () =>{} properties I could pass in a callback function that could be used to add the circle once the square was completed. At this time I could also remove the square or call on a different animation like fading it out. I'd also like to experiment with adding several circles when a single square arrives and then staggering their deployment. this could be interesting for creating almost a particle effect with several bits breaking down from the single path.