[How do you select multiple triggers with ScrollTrigger?]

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

[How do you select multiple triggers with ScrollTrigger?]

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

[Can I use GSAP CSSRulePlugin with the website using Google Fonts?]

Sorry for the bothering. I found out that I can just ignore the warning.

It seems that Google Fonts have already allowed Cross Origin in their headers: access-control-allow-origin:*

 

The issue might be caused by other elements.

[Can I use GSAP CSSRulePlugin with the website using Google Fonts?]

As shown in the console of my Codepen, it seems that CSSRulePlugin is unavailable on sites using Google Fonts, as it will display the following error:

 

DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules at Object.getRule

 

Is there anyway for me to exclude the stylesheet or any other way to solve this issue?

(I'm sorry that I can't quite reproduce this issue because Codepen seems not to allow me to include Google Fonts in the CSS)

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