[.reverse() this animation]

Thank's Rodrigo !

[FOUC on Next.js]

Hi Rodrigo, 

I really appreciate your work and support  !

Indeed, opacity seems to be the best option to me.. 

 

[.reverse() this animation]

Hi Rodrigo,

1. You want the animation to have a delay only when you reverse it ?  ==> Yes
2. What happens if the animation is running when is toggled, there should be a delay as well ? ==> No more toggle button
3. You still want the animation to start from the end, like in your first codepen example ? ==> No
4. You want the animation to start going forward and after it is completed, wait one second and reverse it automatically without a button or a user triggered event ? ==> Yes exactly .. this is it !

[.reverse() this animation]

Hi Rodrigo, 

Thank's for delay  tips !

I also would like to keep the "first animation" because, when I add .progress(1) and .reverse(), I only have the reverse animation but not the  "first animation".

For more clarity, I would like the first animation, then one second delay  and then launch the reverse . 

I mean this animation with reverse after one second but without toggle to launch the reverse : 

See the Pen eYWGeGe by GreenSock (@GreenSock) on CodePen

Thank's for your help.

 

[.reverse() this animation]

Hi Greensock Team,

I would like to reverse this animation without toggle. I used : 

.progress(1)

.reverse();

I also would like to add a delay but it doesn't work. 

Thank's for your help.

See the Pen mdKPqxW?editors=0010 by crankup (@crankup) on CodePen

[FOUC on Next.js]

Hi, 

Working on a preloader on Next.js, I  still have FOUC on my animation.

Vercel : https://preloader-next-iend9lhi2-devmrobot.vercel.app/

Stackblitz : https://stackblitz.com/edit/nextjs-anp715?file=pages%2Fpreloader.js 

I use useLayoutEffect but no effect  and I have a Warning on my console :

Quote

"useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes."

 

I also tried to use this Tip, but I don't know how to adapt it for Next.js

 

How to avoid this problem ?

Thank's !

 

[Error building nextjs project - Greensock club member]

Hi Rodrigo, 

Right, I confirm it works for me on Vercel with Yarn. 

 

Hi Prasana and thank's for your help. My package.json on my npm repo

"gsap": "file:gsap-bonus.tgz",

[Error building nextjs project - Greensock club member]

Rodrigo,

It works for me with Yarn. 

npm still not working on Vercel even if the npm run build work in local. 

Error in Vercel : Module not found: Can't resolve 'gsap/dist/ScrollSmoother' in '/vercel/path0/components'

[Error building nextjs project - Greensock club member]

Hi Rodrigo,

I tried Yarn version (in general, I use to use npm) : https://github.com/devmrobot/AM_PROJECT-NEXT

It works on local but I got this error on Vercel :

 

 

and add Environnement variables : 

 

If I install gsap with Yarn Module Installation Token, I don't need to add gsap-bonus.tgz ?

Also weird the warning "Could not identify Next.js version" 

Thank's

[Error building nextjs project - Greensock club member]

Rodrigo,

I tried like this but it doesn't work : 

 

1/ Create an .npmrc file like this:

registry=https://npm.greensock.com
@gsap:registry=https://npm.greensock.com
//npm.greensock.com/:_authToken=NPM_TOKEN
# //npm.greensock.com/:_authToken=${NPM_TOKEN}

2/ Create a .env.development.local file and add token + add it to .gitignore (.env*.local)

3/ Run npm install gsap@npm:@gsap/shockingl as mentionned in my account.

 

And I have this error : 

 

If put my token directly in .npmrc file, it works.

 

So, I dit it & Run npm install gsap@npm:@gsap/shockingl . It install in package .json : 

 

"dependencies": {

"@types/styled-components": "^5.1.26",

"gsap": "npm:@gsap/shockingly@^3.11.3",

 

then, I uncomment the final line in the .npmrc file and comment out the third line. 

Then, I push on github & add environment variable on Vercel.

 

I still have the same deploy error  on Vercel

 

[Error building nextjs project - Greensock club member]

Rodrigo,

Well, it works on local but when I tried to build on Vercel I still have this error.

ScrollSmoother is well in file \node_modules\gsap\dist\ScrollSmoother.js
An idea ?

 

 

[Error building nextjs project - Greensock club member]

Hi Rodrigo,

Thank's for your help... I works !

I was focused on ScrollWrapper.tsx file and forgot header.tsx 

Thank's again.

[Error building nextjs project - Greensock club member]

Hi, 

Thank's for your reply.

I change the import bu I still have the error  : 

import ScrollTrigger from "gsap/dist/ScrollTrigger";

//also tried : 
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

 

I also add in tsconfig.js : 

{
  "compilerOptions": {
    ...
  },
  "files": [
    "node_modules/gsap/types/index.d.ts"
  ]
}

 

 

 

[Error building nextjs project - Greensock club member]

Hi, 

 

I have install Gsap via NPM following directions for greensock members using (I'm greensock members :)/ also followed the video step by step : module install video 

 

As mentioned in various topics :  Next.js does not support ES Modules by default.  So I import UMD files from the dist folder.

;

 

But still I have this message when I npm run build :

 

 

and also an error message in Vercel : 

 

Any ideas please ?

Thank's