GSAP Animate Multiple Headers on Scroll (ScrollTrigger)

See how we can animate multiple headers on scroll. Using a loop, GSAP and ScrollTrigger are the key tools we'll be leaning on.
This video is just a quick overview. To gain a detailed understanding check out my complete ScrollTrigger course at
www.creativeco...
Joining Creative Coding Club is THE BEST WAY to support the channel and unlock ALL my GSAP training
When you join Creative Coding Club you get over 250 GSAP tutorials to teach you GSAP basics, pro techniques, ScrollTrigger, SVG animation and so much more.
www.creativeco...
Full Demo
codepen.io/sno...

[@kosakkas]

Hi, thanks for the content. What is the benefit or difference of using gsap.utils.toArray method compared to a regular querySelectorAll method? Are there really any? 🤔

[@snorklTV]

Thanks for watching. Not much of a difference now. toArray() had more use when not all browsers supported forEach() on nodeLists returned from querySelectorAll(). you probably only need toArray() if you need an array-specific method like pop(), push(), etc.

[@kosakkas]

​@@snorklTV Cool, thanks!

[@ДенисЗабелин-п2к]

Hey Carl,
Thanks for the video, I'm a big fan of the creative coding(already a member) my question is can we use gsap.context() instead of foreach etc.?

[@snorklTV]

Hi. Thanks for watching. I haven’t used context() but from what I understand from the docs it isn’t intended to replace a forEach loop. It’s more for cleanup. greensock.com/docs/v3/GSAP/gsap.context() glad to hear your enjoying the courses. Thx for your support.

[@ДенисЗабелин-п2к]

@@snorklTV I have find the answer. For react(Next.js in my case) with context we can avoid foreach )
useEffect(() => {
let timeoutId;
let ctx = gsap.context(() => {
timeoutId = setTimeout(() => {
gsap.set('.product-item', { opacity: 0, y: 100 });
ScrollTrigger.batch('.product-item', {
onEnter: (batch) => gsap.to(batch, { opacity: 1, overwrite: true, y: 0, stagger: 0.1, duration: 0.8, ease: 'power2.inOut' }),
onLeaveBack: (batch) => gsap.to(batch, { opacity: 0, duration: 0.3, overwrite: true }),
start: 'top 100%',
end: 'bottom 90%',
});
}, 0.05);
}, component);
return () => {
clearTimeout(timeoutId);
ctx.revert();
};
}, [selectedIndex]);
This code apply for each blocks with class .product-item related to the ref = component

[@jbaldwin1970]

I can’t watch videos with the flashing subtitles unfortunately. Could you do a version for those of us with sensitivity to this? It’s nauseating when there is simultaneous horizontal and vertical movement and the focus should be above the text. My brain doesn’t know where to look😢

[@snorklTV]

sorry for the trouble. i'm just starting to experiment with captions. thanks for the feedback. it's appreciated.

[@WWozniak88]

Hi! Is it possible to run the animation again when scrolling back to the top? Now they all play from top to bottom, but is it possible to scroll back to top and see the same animation?

[@snorklTV]

sure. try: toggleActions: "play none restart reverse", there are definitely a few different approaches and you can get fancy with multiple scrolltriggers which gives more flexibility for the start and reset points in both directions.

[@WWozniak88]

@@snorklTV wow that worked!

[@markxavior]

Thank you Carl,
I need to tell that its the best tutorial for gsap. Well done!.

[@AmitKumar-du3oi]

Good content 🎉

[@federicobalboa9145]

good content, thanks!

[@snorklTV]

Glad you liked it!

[@kanishksuresh1565]

im so glad i found u

[@snorklTV]

Me too! Thx for watching

[@PixelTuts]

how to animate an element when it appears on the screen, but inside a horizontally scrolling module?

[@snorklTV]

check out containerAnimation. there is a great demo in the description too: ruclips.net/video/CzoXwsR5iJo/видео.html

[@thooriga]

Thanks again :)

[@snorklTV]

You’re welcome! More on the way.

[@hvok01]

thank you! just what i needed. love this one

[@snorklTV]

Cool 😎