Jump to content
GreenSock

Huanyee

How do you select multiple triggers with ScrollTrigger?

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

 

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 :) 

 

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×