Leaderboard

That's because of this line in your each() loop. var active = TweenMax.staggerTo(".timeline-circle", '.6', {css:{className:'+=active'}, ease: Power2.easeOut}, '.1'); That will create an identical stagger tween for all the .fade-section elements that animates every .timeline-circle. So, when you hit the first trigger, all the circles animate. You want to only target the .timeline-circle contained within each particular .fade-section. Please try this: var active = TweenMax.to($(this).siblings(".timeline-circle"), '.6', {css:{className:'+=active'}, ease: Power2.easeOut}); If you want the text and circle to animate at the same time you can also change line 12 to this. timeline.add(fadeIn, 0).add(active, 0); Happy tweening.

Thanks for the demo. Very helpful! it looks like your paths don't have any strokes. Notice how I applied a red stroke with css. DrawSVG only works on strokes. You will probably have to recreate the artwork. To use our bonus plugins on CodePen please see: https://greensock.com/try-plugins

Hi and welcome to the GreenSock forums, I took a look at your site. I'm really not sure how I'm supposed to interact with it or what the desired behavior is. Also I don't know where I'm supposed to find your JavaScript. It would really help if you could create a reduced test case as described here: Thanks!

Hi and welcome to the GreenSock forums. It appears your issue is related to how immediateRender works on from() / fromTo() tweens. Its best explained here: https://greensock.com/immediateRender Try setting immediateRender:false on the second tween breadTL.fromTo(firstBread , 1.3 , {left: '0' , top: '-100'} , {left: '0' , top:'60', immediateRender:false}).delay(1.3); Also, regardless of the complexity of your issue, its always best to accompany your questions with a reduced test case as explained here: makes it much easier for us to provide accurate help. Thanks!

Omg, thank you so much PointC! Beautiful, problem solved. Thanks again:)

In addition to Professor @Carl's excellent advice, you may find my post about Adobe Illustrator exports and DrawSVG start points helpful too. Happy tweening.

I don't know if I'm misunderstanding the question here, but that looks like it's working correctly to me. I clicked the hamburger while the file folder is open and vice versa. All items seems to morph back as they should. Am I missing something? Happy tweening.

Thanks @volgograd! I noticed that it doesn't work on iOS Safari, though.

In addition to @Carl's excellent advice, I'd like to add one thing. I see you have a delay() added to the end of the last tween with a value of 1.3. The way you have that written will delay the whole timeline, not just the last tween. That may be your intention, but since the first tween has a duration of 1.3 and the delay you've added is also 1.3, my guess is that you want the second tween to wait until the first has finished. If that is the case, adding delays to tweens isn't necessary with timelines. The tweens will play in sequence unless you change that with the position parameter. Happy tweening and thanks for joining Club GreenSock.

You found him/her because of this forum? It is nice to let us know the position is filled and wether or not this is a good hub for resourcing developers.

Looks great! nice job.

Awesome demos, Craig. So silky smooth

If you still need a unique timeline for each slide, here's a fork of the example I posted earlier in the thread. You can see that I created an array of timelines and manually created one for each article. That is then added on to the end of the animation timeline created each time you click a tab. I also modified the tab indicator a bit to make it into a popper instead of a bubble slider. This one gets a bit bigger so it will look best on CodePen in full page mode. https://codepen.io/PointC/pen/VEaYjb Hopefully that gives you some ideas. Happy tweening.