Web page components animation

Tags: , , , ,



I’m a beginner learning front end development. I’m curious to know and learn how other developers create animated component like the one in below site.

https://bzx.network/

Do we have a tool that will let us create this? Where I can learn these? I couldnot find the tool, right search keyword in google, stackoverflow.

Many thanks!

Answer

If you look using your browser’s dev tools at the image you’ll see it’s made up of SVG components.

There are several ways of animating

  • using CSS
  • JavaScript
  • and/or within SVG itself.

Certainly you need to learn the basics of CSS animation anyway, but I don’t think that’s what’s been used here.

For SVGs google something ‘like how to animate SVGs’. Animating along paths is particularly useful and I suspect that is what is being done here.

There’s lots of tools to help, but SO doesn’t like recommendations on this sort of thing.



Source: stackoverflow