CSS and JS animations how to master?

Question

css

I have been working as a JS developer for 2 years, writing mainly in TypeScript. I am good at html5 and css3 in terms of layout, I did quite a lot at the beginning. On those projects that I made up, the animations were simple, i.e. transition: all 0.3s ease; - it was enough in 90% of cases and somehow I didn’t worry about it. But today I opened the codepen, looked at various kinds of work with the animation of svg, html elements, and I was wildly interested in this. Who has dealt with complex animations on the page, or just knows how to do all these things, tell me the resources, libraries that are worth spending time on and where to start digging in general?
PS With svg worked at the level of insertion into the document and that's it)

Answer 1

Just start trying to implement your ideas. Questions will arise, you will find answers to them. That's how you learn.
With knowledge of the basic things, it will be easier, of course, but all the same, progress is felt when you sit down and do it.
By SVG:
commons.oreilly.com/wiki/index.php/SVG_Essentials/...
A book on the basics, I read in a more adequate epub format
https://sarasoueidan.com/tags/svg/index.html
Sarah's blog (SVG , but you can also read about CSS & JS), more practical and useful things, read from the end to the beginning
According to JS:
https://classroom.udacity.com/courses/ud860/lesson...
This is the basis for understanding "what does it lag? "
https://developers.google.com/web/tools/chrome-dev...
Understanding the capabilities of DevTools greatly simplifies life in the future
https://github.com/getify/You-Dont-Know-JS
And of course, knowledge of JS itself is always useful
For libraries and animation:
The codepen itself, of course. Look at someone else's code, try to figure it out.
https://www.youtube.com/playlist?list=PLkEZWD8wblt...
More or less you can feel what GSAP is in general, a good starter course
https://greensock.com/docs/#/HTML5/GSAP/TweenMax/from /
The documentation itself and tutorials are on the site, you can also peep something on their youtube channel.
https://tympanus.net/codrops/
Lots of useful stuff with examples
All kinds of math:
https://www.youtube.com/playlist?list=PLRqwX-V7Uu6...
https://www.youtube.com/user/codingmath/videos?flo...
You can stick around to understand how all these vector chips are made on canvas
There is also 3D, but this is a separate topic.

Answer 2

I recommend https://cssanimation.rocks/ many interesting examples and tutorials on animations.
Well, as they wrote above, you need to try to realize your idea. For the first time, I more or less understood how to work with animations when I made an animated model of the solar system in pure css.

Answer 3

As for JS animation, there are many libraries, the most popular of which is the well-known jQuery. But something else is interesting. All of these libraries are based on the same code based on requstAnimationFrame . It is approximately like this:

function animate(el, property, startVal, endVal, time, easing) {
  var start = Data.now();
  function reanimate(now) {
    var l = easing(time / (now - start));
    l = l > 1 ? 1 : l;
    el[property] = startVal + (endVal - startVal) * l;
    if(l < 1) requestAnimationFrame(reanimate);
  }
  requestAnimationFrame(reanimate);

Answer 4

https://developer.mozilla.org/en-US/docs/Web/SVG/E...
https://developer.mozilla.org/en-USdocs/Web/API/Ca...