Delay animation until the section is in the viewport

[grantsmith]

Hello,

 

This is my first attempt at a gsap project, and I seem to have got by with some research, copy and pasting and playing. I have some counters which work, albeit probably not in the most efficient manor. What I am stuck on is delaying the animation until the counters are scrolled into the viewport.

 

Would appreciate some pointers.

 

 

See the Pen MWmGBWP by grantsmith (@grantsmith) on CodePen

[Cassie]

 

Hey there grantsmith,

Welcome to the forums. 🥳

 

You'll need to take a look at the scrollTrigger plugin
 

 

[grantsmith]

Perfect, thank you

[grantsmith]

Hmm, there must be something I'm missing?

 

[akapowl]

2 hours ago, grantsmith said:

Hmm, there must be something I'm missing?

 

There are actually three major things, I noticed:

 

1) ScrollTrigger was introduced in GSAP 3.3.0 and you are making use of GSAP 3.2.2 in your codepen demo. Check the ScrollTrigger docs, right below the headline.

 

2) Since you actually want to select all elements with a class of counters, you are missing the . in front of your counters when selecting

 

// not good
const numbers = document.querySelectorAll('counters');

// better
const numbers = document.querySelectorAll('.counters');

 

and 3) when adding scrollTrigger as an object to a timeline or tween, it is supposed to be scrollTrigger in camelCase instead of ScrollTrigger

 

Changing those should already get you running better than before  

 

 

Edit: also you might not want to call tl.play(); at the very end of your code.

 

[grantsmith]

Nothing too fundamental then 😆

Yes, version number didn't cross my mind and I went for the first suggestion!

Thanks for all the help…