ScrollTrigger.batch VS gsap.utils.toArray

[Oleh12]

What is better to use ScrollTrigger.batch or gsap.utils.toArray...?
I mean performance, speed, etc...

Here are two examples of code
 

gsap.utils.toArray('.jsc-line').forEach(el => {
        gsap.from(el, { 
            width: 0,
            duration: 0.8,
            scrollTrigger: {
                trigger: el,
                start: 'bottom 80%',
                markers: true
            }
        });
    });

 

var elms = '.jsc-line';

    gsap.set(elms, {y: 20, opacity: 0});

    ScrollTrigger.batch(elms, {
        toggleActions: "restart none none reverse",
        onEnter: batch => gsap.to(batch, {ease:"Pover1", duration: 0.3, y: 0, opacity: 1, stagger: 0.3 })
    });

Thank you

[OSUblake]

Welcome to the forums @Oleh12

 

Those are two completely different concepts. forEach is just a standard JavaScript loop, and it's not even part of GSAP. The only thing a loop does is reduce the amount of code you need to write.

 

batch is mainly used to create staggered animations, like in a grid layout.

 

So while there may be cases where it looks like they are doing the same thing, they are not.

 

batch will most likely perform worse, but that's because it's generating new animations inside the onEnter callback. With the forEach, it's just creating the animations once. 

 

Will you ever notice the performance difference? Probably not unless you are creating some expensive animations in the onEnter.