NextJs Integration Issues

[anyday]

Hey all. Been tinkering with Greensock and it looks like a pretty slick tool. On it's own with a cdn, seems fine but when I tried importing into NextJs, I run into a couple issues. I searched the forums a bit and saw others, but not quite sure what my solution is. I'm trying to include it with NPM and used their references, and I'm trying to reproduce the parallax demo.

 

Created an Index.ts file under pages (nextjs routing) and included gsap

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

I then included the code in ComponentDidMount:

  componentDidMount() {
    gsap.registerPlugin(ScrollTrigger); 
    
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: "#hero",
        start: "top top",
        end: "+=800",
        scrub: true
      }
    });
    
    gsap.utils.toArray(".parallax").forEach(layer => {
      const depth = layer.dataset.depth;
      const movement = layer.offsetHeight * (1-depth)
      tl.to(layer, {y: movement, ease: "none"}, 0)
    });
  }

The error:

Type error: Property 'dataset' does not exist on type 'unknown'.

  141 | 
  142 |     gsap.utils.toArray(".parallax").forEach(layer => {
> 143 |       const depth = layer.dataset.depth;
      |                           ^
  144 |       const movement = layer.offsetHeight * (1-depth)
  145 |       tl.to(layer, {y: movement, ease: "none"}, 0)
  146 |     });

 

I can get rid of this error by trying the other method of including GSAP as per NPM:

import { gsap, ScrollTrigger, Draggable, MotionPathPlugin } from "gsap/all";

But.... I can't seem to build the files at all, it fails with this error:

import gsap from "./gsap-core.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module

I followed the instructions for transpiling the module... but I'm not sure if that's doing anything at all.

Here's my next.config.js:

const path = require('path');
const withReactSvg = require('next-react-svg');
const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules');
module.exports = withPlugins(
    [
        [
            withReactSvg, {
                include: path.resolve(__dirname, 'svg/'),
                webpack(config, options) {
                  return config
                }
            }
        ],
        [
          withTM, {
            transpileModules: ['gsap']
          }
        ]
      //[/*plug name*/,  { /* plugin config here ... */ }],
    ],
    {
      /* global config here ... */
      
      webpack5: true,
      distDir: '.build/app',
    },
  );

 

I wouldn't be surprised if I'm missing something really simple here... I'm just unsure.

By the way, I may have found a small bug in your example parallax that has images as "fixed" that doesn't allow you to put the parallax anywhere but at the top of the page... Here's my fix if anyone's interested: 

See the Pen KKmqWeO by anydaytv (@anydaytv) on CodePen

[OSUblake]

Hi anyday!

 

SSR doesn't work with ES modules, but here's a Next.js template for you to follow. Notice how we're importing everything into a centralized file, and then exporting from it.

https://codesandbox.io/s/gsap-ssr-plugin-registration-7x63i?file=/gsap.js

 

11 minutes ago, anyday said:

Type error: Property 'dataset' does not exist on type 'unknown'.

  141 | 
  142 |     gsap.utils.toArray(".parallax").forEach(layer => {
> 143 |       const depth = layer.dataset.depth;
      |                           ^
  144 |       const movement = layer.offsetHeight * (1-depth)
  145 |       tl.to(layer, {y: movement, ease: "none"}, 0)
  146 |     });

 

 

Sounds like you're not selecting an element. You should probably log out what layer is.

 

And you shouldn't be selecting DOM elements like that. Check out the selector utility.

https://greensock.com/docs/v3/GSAP/UtilityMethods/selector()

 

 

[anyday]

2 hours ago, OSUblake said:

Hi anyday!

 

SSR doesn't work with ES modules, but here's a Next.js template for you to follow. Notice how we're importing everything into a centralized file, and then exporting from it.

https://codesandbox.io/s/gsap-ssr-plugin-registration-7x63i?file=/gsap.js

 

Thanks for the example, worked like a charm. I'll have to check out your selector utility, but as I'm using a react class and not a function, I just suppressed the typescript error.

    gsap.utils.toArray(".parallax").forEach((layer:any) => {
      const depth = layer.dataset.depth;
      const movement = layer.offsetHeight * (1-depth)
      tl.to(layer, {y: movement, ease: "none"}, 0)
    });

Works 

[OSUblake]

2 hours ago, anyday said:

I'll have to check out your selector utility, but as I'm using a react class and not a function, I just suppressed the typescript error.

 

Not sure what you meant here, but the utility will work with classes, and I didn't realize you were using TypeScript. 

 

The correct usage would be like this. You need to let it know the type you're working with.

 

gsap.utils.toArray<HTMLElement>(".parallax").forEach((layer) => {
	const depth = layer.dataset.depth;
	const movement = layer.offsetHeight * (1-depth)
	tl.to(layer, {y: movement, ease: "none"}, 0)
});

Or...

const layers: HTMLElement[] = gsap.utils.toArray(".parallax");

layers.forEach((layer) => {
	const depth = layer.dataset.depth;
	const movement = layer.offsetHeight * (1-depth)
	tl.to(layer, {y: movement, ease: "none"}, 0)
});

Or...

gsap.utils.toArray(".parallax").forEach((layer) => {
	const depth = (layer as HTMLElement).dataset.depth;
	const movement = layer.offsetHeight * (1-depth)
	tl.to(layer, {y: movement, ease: "none"}, 0)
});