0

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.

Xen_mar
  • 8,330
  • 11
  • 51
  • 74
  • 1
    Since you're not looking for a library, I'll leave this as a comment rather than an answer, but [Green Sock](https://greensock.com/) is probably the best JS animation library out there and it's [open source](https://github.com/greensock/GreenSock-JS/) so you can see the techniques they use – James Long Jan 17 '19 at 17:20
  • Learn to love [FLIP](https://aerotwist.com/blog/flip-your-animations/). It is a very good ideology to get snappy animations. No matter what though, this question is too broad. We can help you execute specific animations that you are having trouble implementing, but general methodologies is not a narrow enough question. – zero298 Jan 17 '19 at 17:21
  • This question is either too broad, opinion based or requires discussion and so is off-topic for Stack Overflow. If you have a specific, answerable, programming issue, please provide full details. – Paulie_D Jan 17 '19 at 17:26
  • I actually looked up Stack Overflow's "on-topic" section before asking this, and "software tools commonly used by programmers" is actually a Stack Overflow "on-topic" question. Having said that - I know this question is very broad: But all I need is an entry point, since I don't know any library that does what I want to check out the GitHub Repo and see how they did it. I just want to know if there are any standard techniques to create interactive animations/JS-Apps? – Xen_mar Jan 17 '19 at 17:31

1 Answers1

0

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

Xen_mar
  • 8,330
  • 11
  • 51
  • 74