Timeline scrollTrigger with Hydrogen (React framework)

[coltonA]

I am trying to set up a timeline to pin a div to the page until the user scrolls to a certain point. I can't tell why it's not working. I'd really appreciate a second set of eyes.

 

Hydrogen uses SSR which makes things kind of tricky.

See the Pen VwdbMPv by almaraz333 (@almaraz333) on CodePen

[mvaneijgen]

Sorry, I don't have any React chops, but if I remove all the React stuff and load GSAP and ScrollTrigger, your code works fine. (I've loaded the scrips in the JS settings panel)

 

See the Pen WNyjXGP?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

 

When I open you're pens console and wait a few seconds it gives an error "[Package Error] 'gsap@v3.11.3' could not be built.  Also you're not loading ScrollTrigger. Have you seen the GSAP installer tools on the docs, with this you can just check the plugins you want to use and it will generate the code for you which scrips you'll need to import. 

[coltonA]

Yea, unfortunately I have to stick with Hydrogen (React) 😕 . Importing ScrollTrigger causes the app to crashes because even though it's a client side file it's trying to load it on the server, which gives a Vite error causing the crash.

 

It's definitely not a green sock issue, it's Hydrogen. I was hoping maybe someone on here has worked with the two before.

 

The two requirements I have are:

 

1. Pinning the scroll

2. Keeping track of the scroll position with some kind of onUodate function.

[TaiwoJazz]

I would advise you to provide a minimal demo in codesandbox (you can set it up with vite and other libraries you are using to stimulate your main code base) and tag @Rodrigo he will check and help you out anytime he's online.. Cheers..

[mvaneijgen]

I've no idea what this all means, but we have a default text snippet: "have you check this for React" and we also have a codesandbox set up with React and GSAP. Here is the template.

 

I bet the problem is that React 18 runs in "strict" mode locally by default which causes your useEffect() to get called TWICE! Very annoying. It has caused a lot of headaches for a lot of people outside the GSAP community too.

 

.from() tweens use the CURRENT value as the destination and it renders immediately the value you set in the tween, so when it's called the first time it'd work great but if you call it twice, it ends up animating from the from value (no animation). It's not a GSAP bug - it's a logic thing.

 

For example, let's say el.x is 0 and you do this: 

useEffect(() => {
  // what happens if this gets called twice?
  gsap.from(el, {x: 100})
}, []);

 

The first time makes el.x jump immediately to 100 and start animating backwards toward the current value which is 0 (so 100 --> 0). But the second time, it would jump to 100 (same) and animate back to the current value which is now 100 (100 --> 100)!  See the issue?

 

So you can either turn off strict mode in React or you can add some conditional logic to your useEffect() call so that it only runs ONCE. Sorta like:

const didAnimate = useRef(false);

useEffect(() => {
  // if we already ran this once, skip!
  if (didAnimate.current) { return; }
  // otherwise, record that we're running it now and continue...
  didAnimate.current = true;
  gsap.from(el, {x: 100});
}, []);

 

Or you could just use .fromTo() tweens so that you define both the start and end values.

 

One of the React team members chimed in here if you'd like more background.

 

Here's a fun graphic to help remember (and it illustrates the frustration...) 

[GreenSock]

That post should be updated to simply suggest using gsap.context() which solves it all for you. Please read the React article at: 

There's no need anymore to use that didAnimate boolean technique. 👍

[Rodrigo]

Hi,

 

On top of the great advice (and meme) provided by @mvaneijgen when working with SSR you can check if the window object is undefined and run your code accordingly:

if (typeof window !== "undefined") {
  // We're on the browser do browser stuff here!
}

On top of that is quite weird that importing a module can brake an entire build system, so as you mentioned in one of your comments in this thread, this seems to be more related to something related to the Hydrogen/Vite than GSAP, since GSAP has been proved and battle tested in several SSR frameworks production sites, such as Next, Nuxt and Svelte Kit to mention just three.

 

Happy Tweening!

[coltonA]

Thanks for all the help! I do have a function to check if the window is present.

  const isBrowser = () => typeof window !== 'undefined';

I agree it's super weird. I'm asking in some Vite/Hydrogen forums but here is the error if this means anything to you? As I mentioned before it seems related to Hydrogen, especially since it works in Next.js etc, so no worries if you're not sure, I still really appreciate your help!

10:10:54 AM [vite] Error when evaluating SSR module virtual__hydrogen-routes.server.jsx:
/home/-/Desktop/Projects/-/node_modules/gsap/ScrollTrigger.js:12
import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at compileFunction (<anonymous>)
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async nodeImport (/home/-/Desktop/Projects/-/node_modules/vite/dist/node/chunks/dep-689425f3.js:50387:21)
    at async eval (/src/components/IntroVideo/IntroVideo.client.jsx?no-proxy:14:31)
    at async instantiateModule (/home/-/Desktop/Projects/-/node_modules/vite/dist/node/chunks/dep-689425f3.js:50317:9)
/home/-/Desktop/Projects/-/node_modules/gsap/ScrollTrigger.js:12
import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at compileFunction (<anonymous>)
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async nodeImport (/home/-/Desktop/Projects/-/node_modules/vite/dist/node/chunks/dep-689425f3.js:50387:21)
    at async eval (/src/components/IntroVideo/IntroVideo.client.jsx?no-proxy:14:31)
    at async instantiateModule (/home/-/Desktop/Projects/-/node_modules/vite/dist/node/chunks/dep-689425f3.js:50317:9)

 

[GreenSock]

Yeah, that definitely doesn’t sound GSAP-related. Maybe try importing from the /dist/ directory (not modules). 

// old
import ScrollTrigger from "gsap/ScrollTrigger";

// new
import ScrollTrigger from "gsap/dist/ScrollTrigger";

🤷‍♂️

 

And do that for all your GSAP-related imports of course. 

[Rodrigo]

6 hours ago, coltonA said:

especially since it works in Next.js

Ahh yes, that's an important bit of information right there. As Jack already suggested importing from the dist folder should solve this.

 

@coltonA thank you for sharing that, since it will definitely help us steering other Hydrogen users in the right direction!

 

Happy Tweening!