Jump to content
Search Community

no.r animation problem

Lillian.S test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • Solution

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

  • Like 4
Link to comment
Share on other sites

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  👍

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...