ScrollMagic Timeline Animation triggers all at once, instead of one by one

[NAP]

Hi,

 

I'm trying to create an actual timeline, with text on each side of the timeline line (please see my codepen). Once you scroll down the page I'm trying to make the text fade in and the corresponding circle next to the it fade in from hollow to solid all at the same time. My issue is that once the page loads every circle in a viewport becomes solid all at once, instead of one by one, and doesn't correspond with the text fade in. 

 

I'm brand new to coding, and all the animation stuff is very confusing to me still. Any help will be greatly appreciated. Thank you! 

See the Pen yReWQo by natalia-panfilova (@natalia-panfilova) on CodePen

[PointC]

You're just missing the GSAP plugin from ScollMagic that allows it to hijack the tweens. Add this to your project and you'll be good to go.

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>

 

Happy tweening.

 

[NAP]

18 hours ago, PointC said:

You're just missing the GSAP plugin from ScollMagic that allows it to hijack the tweens. Add this to your project and you'll be good to go.

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>

 

Happy tweening.

 

Hi PointC, thanks for your reply! You're right, I forgot to add it to my codepen, i was wondering why it didn't look like my localhost version. So that didn't really solve my problem, the dots still fade in and become solid all at once instead of following the same animation path as the text. 

 

I updated the codepen, so it's easier to understand what I'm talking about.

 

Thanks

 

 

[PointC]

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.

 

[NAP]

1 hour ago, PointC said:

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.

 

 

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

 

See the Pen yReWQo by natalia-panfilova (@natalia-panfilova) on CodePen