anyday

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

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: https://codepen.io/anydaytv/pen/KKmqWeO