Search the Community
Showing results for tags 'svg tweenmax'.
HI there! I am in need of some advice and help! I have worked on this for over 3 weeks and I can't seem to find the solution. I have been using Tweenmax and Scrollmagic in order to make 3 progress circles that fill in a svg path, each loading on different times. I used a drawing path from ScrollMagic and making a timeline so they can load at different times with TweenMax. I have been able to get everything done thus far, the only thing that is holding me behind is how to manipulate the timing for each circle. I tried adding "+=1" to the second and third circle but it didn't work. On my codepen, you will find that all three load, but are not loading at separate times like I want to.I would like the first one to load, then the second circle, and third, each having a time in between. with a nice sequence. A perfect example of what I am trying to replicate (this demo does not use scrollmagic,so just focus on the behavior progress circles to the right) https://codyhouse.co/demo/reading-progress-indicator/how-audiences-reacted-to-the-star-wars.html I hope I can understand what I am doing wrong because I have tried everything. Thank you and looking forward to the feedback!