What are the resources for creating a site to describe the product model?

Question

css

Good afternoon. The essence of the task - I want to write a service where you can describe the product with a model. The model is a flowchart or garf, where points are certain states that can be described and edited, and arcs (or arrows) are actions. I have experience in programming, but I have not come across the consciousness of sites. The essence of the question is where to start and are there any / resources on the topic, so as not to completely reinvent the wheel, but to assemble it in parts?)

Answer 1

With the help of js, you calculate that the element falls into the visible zone (it is easy to google) and add a class with animation. According to the link that you gave, the description of the animation can be viewed in the styles of the element (copied here).

@keyframes bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    transform: translateY(-30px);
  }

  80% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0);
  }
}

Answer 2

go.js