no.r animation problem

[Lillian.S 2 Likes (Newbie)]

Hello,

 

I try to animate the numbers with the mentioned function and ScrollTrigger, As the classes are the same I suppose I have to create a loop and somehow call it with that, but have no idea how I could exactly achieve it. I tried to play with it for a while but no luck, I would appreciate it if you could help me with that.

 

Best,

See the Pen zYJBObw?editors=0100 by lillianli (@lillianli) on CodePen

[GreenSock 18,256 Likes (Superhero)]

Welcome to the forums, @Lillian.S

 

Looks like you forgot to load ScrollTrigger. And yes, you'd need to do a loop. I'm not entirely sure what effect you're going for, but maybe this can serve as a jumping-off point: 

See the Pen MWqeWLQ?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Have fun!

[Lillian.S 2 Likes (Newbie)]

Thank you so much for the fast reply! that's cool! 

actually I'm wondering how could I stagger these rows by 0.5 with the first row's trigger ('.nu' in this case) as well.

here's is my pen playground so far: 

See the Pen gOdMbaw?editors=1000 by lillianli (@lillianli) on CodePen

[GreenSock 18,256 Likes (Superhero)]

You're mapping them each to start at a certain scroll position, so what do you mean by "stagger" them? Are you saying that ONLY when they're initially visible in the viewport, it'd handle that completely differently and sorta unhook them and run them in a staggered fashion instead? 

 

Maybe you're just looking for what ScrollTrigger.batch() makes easy(?): 

See the Pen MWqeKzx?editors=1010 by GreenSock (@GreenSock) on CodePen

[Lillian.S 2 Likes (Newbie)]

I meant when the first div with the class ".nu" reach the certain trigger point it fire ups the whole 3 rows animation but with stagger.

 

 

[mvaneijgen 1,555 Likes (Superhero)]

I find it is always easier to start with just the animation and remove ScrollTrigger from your setup at the beginning! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

What I've done is instead of adding a ScrollTrigger forEach .numb, create a timeline and add the scrollTrigger:{} object to that timeline (disabled it for now, to test the animation). Then on the timeline add the animation to each .numb, now all your .numb elements get animated at the same time, but with the stagger: 0.5 property each .numb gets animated in a staggered fashion. When you're happy with the animation you can remove the comments from the scrollTrigger:{} object and have it animate on scroll. Hope it helps and happy tweening! 

 

See the Pen OJoXWgJ?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[Lillian.S 2 Likes (Newbie)]

6 minutes ago, mvaneijgen said:

I find it is always easier to start with just the animation and remove ScrollTrigger from your setup at the beginning! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

What I've done is instead of adding a ScrollTrigger forEach .numb, create a timeline and add the scrollTrigger:{} object to that timeline (disabled it for now, to test the animation). Then on the timeline add the animation to each .numb, now all your .numb elements get animated at the same time, but with the stagger: 0.5 property each .numb gets animated in a staggered fashion. When you're happy with the animation you can remove the comments from the scrollTrigger:{} object and have it animate on scroll. Hope it helps and happy tweening! 

 

 

 

Thank you so much for the very accurate explanation  👍