Animate time line events with svg line

[weinde]

I have this time line where I am trying to animate "year" events as the line draws out... what happens now is that the line is drawn and then the "years" start apearing... what should I change that the both animations start in the same time and year events start appearing as the line draws out?

 

See the Pen GRzbOWw by Weindorfer (@Weindorfer) on CodePen

[Toso]

hi @weinde

there are no timelines in the code, not sure if you added the right pin so if that's the right one you will need to create  1 timeline and add all the animations to it,

then you can play with the position param to choose what and when each element plays  

 

https://gsap.com/resources/position-parameter

or check the cheat sheet 

https://gsap.com/community/cheatsheet/

[Rodrigo]

Hi,

 

It seems to me that these demos could provide some good inspiration:

See the Pen rNPvbRE by GreenSock (@GreenSock) on CodePen

 

See the Pen GRoXzYj by GreenSock (@GreenSock) on CodePen

 

See the Pen xxyoLRz by GreenSock (@GreenSock) on CodePen

 

See the Pen mdWPMwY by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!