How do you select multiple triggers with ScrollTrigger?

[Huanyee]

Hi GSAP fellows,

 

I'm trying to rewrite the animation below, so that it can leverage scrollTrigger.

See the Pen wvWvNGd by eric-chuang (@eric-chuang) on CodePen.

 

However, how I code right now can't use the trigger '.title-bg' to select multiple elements. Instead, it plays the animation on 'chars' three times.

const tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".title-bg",
        start: "top center",
        toggleActions: "play pause replay pause",
        markers: true,
      }
    }),
    splitText = new SplitText(".title-bg", { type: "chars" }),
    chars = splitText.chars;
  gsap.utils.toArray(".title-bg").forEach((title) => {
    tl.set(title, {
      backgroundImage: "url(" + title.dataset.background + ")"
    })
      .fromTo(
        title,
        {
          clipPath: "polygon( 0 100%, 100% 100%, 100% 100%, 0 100% )"
        },
        {
          duration: 1,
          clipPath: "polygon( 0 0, 100% 0, 100% 100%, 0 100% )"
        }
      )
      .fromTo(
        chars,
        {
          clipPath: "polygon(0 100%, 0 100%, 0 100%, 0 100%)"
        },
        {
          duration: 0.5,
          clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)"
        }
      )
  });

 

I looked up the document of ScrollTrigger and found the comment in the Simple Example section: "// start the animation when ".box" enters the viewport (once)." I assume that this implies that the way I define my trigger ( '.title-bg' ) will only retrieve the first '.title-bg' element. 

 

I know that it's a better way to use 'gsap.utils.toArray' when looping, but since there will be 2 loops in this situation (one for the main .title-bg element and the other for the splitted texts), how is the better way to achieve the effect?

See the Pen KKMMvXx by eric-chuang (@eric-chuang) on CodePen.

[akapowl]

Hey @Huanyee

 

You can actually achieve this with just one loop for each .title-bg - you just need to fit everything neccessary inside that loop.

In this following pen, I reverted the basic setup of the animation back to the initial example.

 

The only thing, that actually needed to be changed on the timeline, was to take the initial .set on the chars out of the timeline, and instead, set it up beforehand, because you don't want it to be part of the animation, but the initial state.

 

See the Pen 0f05a4134f2711f347612c8fb9f6fead by akapowl (@akapowl) on CodePen.

 

 

 

Hope this helps.

Cheers,

Paul

[Huanyee]

Hello @akapowl,

 

Thank you for your kind reply.

According to your reply, I know where my logic flaw is. Wrapping the whole '.title-bg' seems to solve my problem, thank you so much.

 

May I fork your Codepen and make some adjustments for my own project?

 

Eric

[akapowl]

 

22 minutes ago, Huanyee said:

May I fork your Codepen and make some adjustments for my own project?

 

Sure, go ahead.

 

But don't just copy and paste - understanding the underlying logic is key.

 

Happy forking