littledotchris

Thank you for clarifying, if that's the case then I think this is a pretty good solution. Cheers for all your help guys, this plugin is amazing! 😁

Do you know if I'm likely to run into any issues "registering the plugin" in a component that will be used multiple times on the page? At the moment it seems to work fine, i'm just wondering if this is not optimal, given that I will likely have a lot of components using the ScrollTrigger plugin on page at the same time, and each component instance runs the gsap.registerPlugin(ScrollTrigger) when it's mounted.

I honestly love this forum, you guys offer some of the best support I've come across. 😅 You are of course correct, my particular setup is a Next.js app, so either SSR pages or Static pages that are pre-rendered on the server. (Don't know why I didn't mention that earlier 🤦‍♂️) I've gotten it to work using Blake's useEffect suggestion, though I needed to check for window even inside the useEffect, makes sense to me. For anyone else's benefit, here's the final working code: useEffect(() => { // make sure we're in browser land for gsap plugin registration if (typeof window !== "undefined") { // register gsap ScrollTrigger plugin gsap.registerPlugin(ScrollTrigger); // Set up timeline const tl = gsap.timeline({ scrollTrigger: { trigger: triggerPointRef.current, scrub: true, start: "top", }, }); // Configure the timeline animation tl.from(letterRefs.current, { duration: 1, y: 200, opacity: 0, stagger: 0.02, }); } }, [letterRefs]); And for all the people finding this via google, here's a bunch of words... React / Next.js gsap ScrollTrigger, Please gsap.registerPlugin(ScrollTrigger) TypeError: _toArray is not a function. There is probably a more elegant solution than this, because thinking about it, this useEffect lives inside this particular component, there could be multiple of these on the page together, so it seems to me like registering multiple instances of ScrollTrigger is probably going to cause issues / not be best practice. Am I right in my thinking guys? Perhaps a useEffect in the top level app component to register the plugin once so it's available to use in child components that call it? Any suggestions welcome 😄 Thank you Zach, Jack & Blake!

Ok so, for arguments sake I am now using the correct syntax, and umd modules, leaving my file looking like this: import PropTypes from "prop-types"; import { useRef, useEffect } from "react"; import { gsap } from "gsap/dist/gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; import styled from "styled-components"; gsap.registerPlugin(ScrollTrigger); const AnimatedH1 = ({ content }) => { const letters = content.split(""); let letterRefs = useRef([]); let triggerPointRef = useRef(null); const tl = gsap.timeline({ scrollTrigger: { trigger: triggerPointRef.current, scrub: true, start: "top top", end: "+=100%", }, }); const outputLetters = () => letters.map((letter, i) => ( <Letter key={i} ref={ el => (letterRefs.current[i] = el) }> {letter} </Letter> )); useEffect(() => { tl.from(letterRefs.current, { duration: 1, y: 200, opacity: 0, stagger: 0.02, }); }, [letterRefs]); return ( <div ref={ el => (triggerPointRef.current = el) }> <WordContainer>{ outputLetters() }</WordContainer> </div> ); }; I appear to still have errors, though now I am getting: # Please gsap.registerPlugin(ScrollTrigger) # TypeError: _toArray is not a function I have also tried having `gsap.core.globals("ScrollTrigger", ScrollTrigger); ` after the plugin registration, but the errors persist. Scratching my head a little on this one. Thanks for all your help so far, any ideas what I might be experiencing?

Thank you for your response! It looks that way, though I had a GSAP timeline working with the ES module approach, it was only adding in the ScrollTrigger plugin that introduced the issue I am currently seeing. So I am fairly sure ES modules are supported in my environment. As for the CSSPlugin, It was left over by accident, apologies for that... I was previously importing Timeline and appeared that the Timeline uses CSSPlugin under the hood so required it? Fairly sure I found that tip on the forum. (Let's hope I was reading the correct GSAP version at that time). Thank you for the link Zach! Let's get my syntax in order 😅

I am having issues in a similar setup, though I appear to be getting a different error: # /node_modules/gsap/ScrollTrigger.js:517 # export var ScrollTrigger = /*#__PURE__*/function () { # ^^^^^^ # # SyntaxError: Unexpected token 'export' I am trying to create a staggered letter reveal of a word that is triggered when the component has entered the viewport. I have the following in my file as I already found and tried this work around: import PropTypes from "prop-types"; import { useRef, useEffect } from "react"; import { gsap, CSSPlugin } from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import styled from "styled-components"; gsap.registerPlugin(ScrollTrigger); gsap.core.globals("ScrollTrigger", ScrollTrigger); const AnimatedH1 = ({ content }) => { const letters = content.split(""); // create array of letters let letterRefs = useRef([]); // initial array of letter refs let triggerPointRef = useRef(null); // initial trigger point ref const tl = gsap.timeline(); // timeline // this map outputs each letter and assignes it a unique ref, updating our letterRefs const outputLetters = () => letters.map((letter, i) => ( <Letter key={i} ref={el => (letterRefs.current[i] = el)}> {letter} </Letter> )); // On mount of the component stagger the letters on the timeline using the // trigger point ref to trigger the timeline useEffect(() => { tl.staggerFrom( letterRefs.current, 0.6, { scrollTrigger: triggerPointRef.current, y: 200, opacity: 0, }, 0.02 ); }, [letterRefs]); return ( // assign our wrapping div as the trigger for the timeline scrollTrigger <div ref={el => (triggerPointRef.current = el)}> <WordContainer>{outputLetters()}</WordContainer> </div> ); }; Any ideas what could be causing that? Love the plugin by the way, it's amazing! 👏