Complex custom JS interactive animations - and how to create them?

I have been tinkering with JavaScript (React JS), Python, HTML and CSS for a while now. While doing so, I came across some occasional animations - most of them were standard css animations (e. g. transition: width 2s;). But more and more I am wondering how to make more complex custom interactive animations and I simply can't figure out the right techniques to learn to achieve the desired results (yes, I used the search function before asking this very broad general question). There are HTML5 canvas that seem to be a flexible and a versatile tool, but I don't know if they are the "right" tool for what I have in mind.

Let me give you an example of what I want to do:

Process visualisation: The resources of a company are animated as moving objects moving along a path that is not fixed but rather generated by the structure of the companies supply chain.
Drag&Drop Capabilities: Elements e.g. suppliers can be added to the supply chain via drag and drop
Complex custom diagrams (I know powerful libraries exist to achieve this e.g. AnyChart): A diagram is derived from the process data that displays life data. I am able to click in the Diagram to add new data points.

I am not looking for another JS library but rather the techniques to build these animations myself. Also I am looking for a good point to start learning these techniques. So the questions really are: What do I need to learn to be able to create these interactive animations, are HTML5 canvas the right tool? What types of techniques for interactive animations are there and when to use them?

Thank you.

Solution

So I researched this topic a little and I think the best and most conclusive summary of this topic (ReactJS & VanillaJS) can be found here:

https://css-tricks.com/comparison-animation-technologies/#react-and-animation