Jump to content
Search Community

Scroll Trigger React

mosik4 test
Moderator Tag

Recommended Posts

Hi,

I am trying to get the Scroll Trigger to work on my gatsby website. I am a beginner at both Gatsby/React and GSAP so forgive my ignorance. I created a sandbox of how I did this in Gatsby. It works on development build like here on this sandbox but not when I try to go production build. I get this error "failed Building static HTML for pages". Does anyone know what I am doing wrong? Thanks!

https://codesandbox.io/s/unruffled-cannon-v5wh4?file=/src/App.js

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Unfortunately the sample you provided corresponds to a project based on create react app and not Gatsby, so I can't tell you exactly the source of your problem. It could be an issue with Gatsby's server side approach to generate the static files and a document reference somewhere in your code, it could also be an issue with some GraphQL query in a page or component.

 

Could you create a github repo with your project so we can take a look at it?

 

Also can you copy and paste the entire error in the command line when you run the npm run build command?

 

Happy Tweening!!!

  • Like 2
Link to comment
Share on other sites

Hi Rodrigo and thank you so much for your response!

Here is my repo: 

https://github.com/tbdalen/tbdalen.github.io.git

And this the entire error:

failed Building static HTML for pages - 0.822s

 ERROR #95313

Building static HTML failed for path "/"

See our docs page for more info on this error: https://gatsby.dev/debug-html



  TypeError: _toArray is not a function

  - render-page.js:3746 ScrollTrigger.init
    */tbdalen.github.io/public/render-page.js:3746:20

  - render-page.js:3707 new ScrollTrigger
    */tbdalen.github.io/public/render-page.js:3707:10

  - render-page.js:4317 Function../node_modules/gsap/ScrollTrigger.js.ScrollTrigger.create
    */tbdalen.github.io/public/render-page.js:4317:10

  - render-page.js:4872 _scrollTrigger
    */tbdalen.github.io/public/render-page.js:4872:105

  - render-page.js:6362 new Timeline
    */tbdalen.github.io/public/render-page.js:6362:27

  - render-page.js:7978 Object.timeline
    */tbdalen.github.io/public/render-page.js:7978:12

  - render-page.js:11046 new indexPage
    */tbdalen.github.io/public/render-page.js:11046:73

  - react-dom-server.node.production.min.js:36 d
    [tbdalen.github.io]/[react-dom]/cjs/react-dom-server.node.production.min.js:36:320

  - react-dom-server.node.production.min.js:39 $a
    [tbdalen.github.io]/[react-dom]/cjs/react-dom-server.node.production.min.js:39:16

  - react-dom-server.node.production.min.js:44 a.b.render
    [tbdalen.github.io]/[react-dom]/cjs/react-dom-server.node.production.min.js:44:476

  - react-dom-server.node.production.min.js:44 a.b.read
    [tbdalen.github.io]/[react-dom]/cjs/react-dom-server.node.production.min.js:44:18

  - react-dom-server.node.production.min.js:54 renderToString
    [tbdalen.github.io]/[react-dom]/cjs/react-dom-server.node.production.min.js:54:364

  - render-page.js:618 Module../.cache/static-entry.js.__webpack_exports__.default
    */tbdalen.github.io/public/render-page.js:618:28

  - render-html.js:28
    [tbdalen.github.io]/[gatsby]/dist/utils/worker/render-html.js:28:36

  - debuggability.js:384 Promise._execute
    [tbdalen.github.io]/[bluebird]/js/release/debuggability.js:384:9

  - promise.js:518 Promise._resolveFromExecutor
    [tbdalen.github.io]/[bluebird]/js/release/promise.js:518:18


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gatsby-starter-hello-world@0.1.0 deploy: `gatsby build && gh-pages -d public -b master`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gatsby-starter-hello-world@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     *\npm-cache\_logs\*-debug.log

 

Link to comment
Share on other sites

Not sure if this will help but I think the issue may be due to tree shaking. Another GSAP user had an issue with the Draggable plugin and fixed it by using a useEffect hook (link below). It might be worth posting a comment on a Gatsby forum also as I believe you should be able to register the plugin in the gatsby-node.js file.

 

Link to similar issue

 

Hope this helps or at least points you in the right direction. 

 

Andy

  • Like 2
Link to comment
Share on other sites

Mhh... perhaps Andy is right, since you are using class components, you could move this particular part to the componentDidMount() method:

this.tl = gsap.timeline({
  paused: true,
  scrollTrigger: {
    trigger: this.logoTrigger, // start the animation when ".box" enters the viewport (once)
    scrub: true,
    markers: true,
  },
});

And in your constructor leave just the definition of tl:

this.tl = null;

In case you need to reference it somewhere else in your component.

  • Like 2
Link to comment
Share on other sites

Gatsby's documention.

https://www.gatsbyjs.org/docs/debugging-html-builds/

 

Quote

Some of your code references “browser globals” like window or document. If this is your problem you should see an error above like “window is not defined”. To fix this, find the offending code and either a) check before calling the code if window is defined so the code doesn’t run while Gatsby is building (see code sample below) or b) if the code is in the render function of a React.js component, move that code into a componentDidMount lifecycle or into a useEffect hook, which ensures the code doesn’t run unless it’s in the browser.

 

So you either have to check.

if (typeof window !== "undefined") {
  gsap.registerPlugin(...)
}

 

Or you have to put registerPlugin stuff in useEffect or componentDidMount.

 

Also, you might need to do this temp work around.

 

 

 

  • Like 4
Link to comment
Share on other sites

Woop woop! I love this community and I love ScrollTrigger 😄 It worked when I included both registerPlugin and the temporary workaround inside the if statement.
 

import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"

if (typeof window !== `undefined`) {
  gsap.registerPlugin(ScrollTrigger)
  gsap.core.globals("ScrollTrigger", ScrollTrigger)
}

 

  • Like 4
Link to comment
Share on other sites

Here is a simple component for context and reference:


index.js

import React from "react";
import styles from "./index.module.scss";

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

if (typeof window !== `undefined`) {
  gsap.registerPlugin(ScrollTrigger)
  gsap.core.globals("ScrollTrigger", ScrollTrigger)
}

class Index extends React.Component {
  constructor(props) {
    super(props);
    this.container = null;
    this.trigger = null;
    this.tl = gsap.timeline({
      paused: true,
      scrollTrigger: {
        trigger: this.trigger,
        scrub: true,
        markers: true
      }
    });
  }
  componentDidMount() {
    this.tl.to(this.container, {
      x: 100,
      duration: 2
    });
  }
  render() {
    return (
      <div>
        <div className={styles.container}>
          <div className={styles.header} ref={div => (this.container = div)}>
            <h1>Hello</h1>
          </div>
        </div>
        <div className={styles.trigger} ref={div => (this.trigger = div)}>
          trigger
        </div>
      </div>
    );
  }
}

export default Index;

index.module.scss

.container {
  position: fixed;
}

.header {
  position: absolute;
  top: 40%;
  left: 50%;
}

.trigger {
  position: absolute;
  bottom: -50em;
}

 

  • Like 3
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.
×
×
  • Create New...