Как анимировать блок?

Question

[DmitryLife]

Всем привет.

Передо мной стоит задача анимировать блок:


Анимация должна происходить след. образом:
1. Появляется из фейда верхний блок
2. ОТ него рисуются ветви вниз
3. Появляются точки и блок
4. Рядом с точками текст

Как я понимаю отрисовка ветвей должна производиться в CAnvas?

Не совсем понятно как это сделать

Answer 1

[Игорь Бакин]

Я бы делал с помощью GSAP, canvas тут не нужен
устанавливаешь gsap и анимируешь

var tl = new gsap.timeline()
    .to('.firstDiv' , 0.3, {autoAlpha: 1}) // фейд блока
    .to('.line1' , 0.3, {scaleX: 1}) // для увеличении линнии с 0 до обычного размера

... и т.д.