Jump to content


  • Posts

  • Joined

  • Last visited

About Huanyee

Huanyee's Achievements

  • Week One Done
  • One Month Later
  • One Year In

Recent Badges



  1. 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
  2. Hi GSAP fellows, I'm trying to rewrite the animation below, so that it can leverage scrollTrigger. https://codepen.io/eric-chuang/pen/wvWvNGd 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?
  3. 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.
  4. 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)