La Colonia

Thank you @pxel I managed to create my Dockerfile for my NextJS app following your suggestion. In case anyone needs it here is a basic version based on the official NextJS with docker example: # Stage 1: Copy source code and build nextjs app FROM node:16 as builder WORKDIR /usr/src/app COPY ./package.json ./ COPY ./package-lock.json ./ RUN npm config set //npm.greensock.com/:_authToken=yourverylongauthtocken123456789 RUN npm config set @gsap:registry https://npm.greensock.com RUN npm install @gsap/shockingly RUN npm install gsap --registry https://npm.greensock.com RUN npm config delete //npm.greensock.com/:_authToken RUN npm config delete @gsap:registry RUN npm install COPY . . RUN npm run build # Stage 2: copy production code and execute entrypoint script FROM node:16 WORKDIR /usr/src/app COPY ./package.json ./ COPY ./package-lock.json ./ # Copy build files and entrypoint scripts COPY --from=builder /usr/src/app . # Install production dependencies RUN npm install --production EXPOSE 3000 RUN npm run start

Ok. I guess now it's solved. I detached the first tween from each timeline and managed alone in order to avoid killing the tween. Here below the result https://codepen.io/a-barbieri/pen/wbaWXw

Ok, I guess I've found out why. The first tween gets killed because is animated by another timeline. After that, the tween doesn't exist anymore breaking the timeline.

I've slowed up the animation and I found out that moving the mouse on the elements doesn't restart the first tween of the timeline. In other words, the first tween of the three timelines is executed on the same HTML element. If I start playing timeline A and before the first tween ends I play timeline B, the first tween of B doesn't start from the beginning (even though is a fromTo), but it keeps from where timeline A left. Once the tween on the first element is complete, the timeline is broken and the fromTo doesn't work anymore. Here is the structure for all the three timelines: .fromTo(container, 0.3, { x: "0%" }, { x: "100%" }) .staggerTo(items, 0.1, { opacity: 1 }, 0.1); See the video (password: codepen) See the codepen below. https://codepen.io/a-barbieri/pen/bydpYj

Hi, I'm having a issue with TimelineMax. I've created a timeline that opens and closes the drawer in my navigation. It works, but eventually if the first time I move the mouse above the navigation elements (that triggers the animation), one of the timelines doesn't work anymore. I'm executing the timeline on mouseenter triggered by the main navigation items. Then I'm playing the timeline reversed when it's triggered a mouseleave by the container of the entire navigation. You can see the working example in the following video (password: codepen). The problem happens when I move quickly the mouse over the navigation items. I managed to film it in this video (password: codepen) And here the video that shows the error (password: codepen)

As I keep hitting this question I'll file here my implementation which hopefully can help other folks like me. I use Jest, not only for React but for any project which involves Webpack. Testing with the current version of Jest is super easy. If you read Jest documentation you can simply mock GSAP creating a file in `__mocks__` directory. Let's say you are importing TweenMax and you want to use `to` method: import { TweenMax } from "gsap/TweenMax"; Add two files into the __mocks__ directory. TweenLite can be empty. . └── __mocks__ └── gsap └── TweenLite.js └── TweenMax.js module.exports = { TweenMax: class{ static to(selector, time, options) { return jest.fn(); } } } You've successfully mock your `TweenMax.to` method. Timelines are different Because timeline works on instances of a class the mock should be done this way: import { TimelineMax } from "gsap/TimelineMax"; Again add two files into the __mocks__ directory. TweenLite can be empty. . └── __mocks__ └── gsap └── TweenLite.js └── TimelineMax.js module.exports = { TimelineMax: class { constructor(){ this.to = jest.fn().mockReturnThis(); } } }; Use `mockReturnThis()` to be able to chain methods.

Yes, it's the window/document which generates the defaultView error. I guess @Hossein Rahimi answer is the way to go, but I just wanted to have a final ok from GSAP team.

We'd love to know if this have been solved and how to implement the solution on our projects as well. We are using Draggable and ThrowPropsPlugin and it generates the same issue. This is interesting, though we used the `require` method in ComponentDidMount so far. // Require libraries here so ServerSideRendering won't complain require("gsap/ThrowPropsPlugin"); this.Draggable = require("gsap/Draggable");

Just a note, I haven't checked all libraries, but trying to run GSDevTools doesn't seem to work. @OSUblake if you want email or get in touch with a PM I can share you the private repo from which I installed it. Using GSDevTools 0.1.7 I've been doing this import { TweenMax } from "gsap"; //=> works import Draggable from "gsap/Draggable"; //=> works import ThrowPropsPlugin from "gsap/ThrowPropsPlugin"; //=> works import GSDevTools from "gsap/GSDevTools"; //=> GSDevTools is undefined

@GreenSock we were using ^1.20.4. Upgrading to 2.0.0 fixes it. Thanks!

Same thing here. It must be something specific to Create-React-App as with another boilerplate we didn't have that problem (the version is the same: 1.20.4). We haven't been able to use UMD version. Honestly we just tried dropping the following line in the App.js component... import * as TweenMax from "gsap/umd/TweenMax"; ... but it throws "module not found" although it's there and it works locally using the standard ES6 import. If you want to test it, just clone Create-React-App, add gsap package and import TweenMax on the App.js file. At this point running `yarn build` should throw a error: yarn run v1.6.0 $ node scripts/build.js Creating an optimized production build... Failed to compile. Failed to minify the code from this file: ./node_modules/gsap/esm/TweenLite.js:1966 Read more here: http://bit.ly/2tRViJ9 error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.