Correct syntax

[vickybower]

Hi

I'm pretty new to GSAP - think its awesome and want to learn more.

I've written this code which works how I want it to - I was just wondering if I could shorten the syntax further by using an array and wanted to know the correct syntax for it.

TIA

Vicky

 

	ScrollTrigger.create({
            trigger: ".panel.four",
            start: "top 75%",
            toggleClass: {targets: "#stats-one", className: "show"},
        });

        ScrollTrigger.create({
            trigger: ".panel.four",
            start: "top 75%",
            toggleClass: {targets: "#stats-two", className: "show"},
        });

        ScrollTrigger.create({
            trigger: ".panel.four",
            start: "top 75%",
            toggleClass: {targets: "#stats-three", className: "show"},
        });

        ScrollTrigger.create({
            trigger: ".panel.four",
            start: "top 75%",
            toggleClass: {targets: "#stats-four", className: "show"},
        });

 

[akapowl]

Hello Vicky, welcome to the GSAP forums!

 

Since your ScrollTriggers do all have the same trigger element and start, you can simply just add multiple targets delimited by a comma, like so:

 

ScrollTrigger.create({
  trigger: ".panel.four",
  start: "top 75%",
  toggleClass: {targets: "#stats-one, #stats-two, #stats-three, #stats-four", className: "show"},
});

 

I changed some things a bit in this demo just for better visibility - btw a minimal demo always helps  

 

See the Pen yLPQbRv by akapowl (@akapowl) on CodePen

 

[vickybower]

Thanks for that and for the example. Much appreciated.