[Trouble installing npm install gsap@npm:@gsap/shockingly]

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

 

[Triggering play/reverse quickly brakes timeline]

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

 

See the Pen wbaWXw by a-barbieri (@a-barbieri) on CodePen

[Triggering play/reverse quickly brakes timeline]

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.

 

 

[Triggering play/reverse quickly brakes 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.

 

See the Pen bydpYj?editors=0010 by a-barbieri (@a-barbieri) on CodePen

[Triggering play/reverse quickly brakes timeline]

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)

 

 

See the Pen GagedL?editors=0010 by a-barbieri (@a-barbieri) on CodePen

[Unit testing with GSAP]

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.

[React, Next.js and GSAP issues - possible fixes for SSR]

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.

[React, Next.js and GSAP issues - possible fixes for SSR]

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");

 

[Best way to use GSAP with Webpack]

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

 

[Best way to use GSAP with Webpack]

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

[Best way to use GSAP with Webpack]

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.