CRA is Breaking the ScrollTrigger

[FirstEight]

I converted this codepen into a CRA Application for further work.

Well i like / love GSAP btw. 

 

i swapped everything into the App.js of my CRA and imported all the things like this

 

import React from "react";
import { useEffect, useLayoutEffect, useRef } from "react"
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import SplitType from 'split-type';

 

tried useEffect and useLayoutEffect

 

everything else is exactly like in the codepen.

 

when i start the page, the timelines are playing like 0.0001 seconds and then stop... so i got a lot of opacity: 0.01 items in space and it kinds works only when i re-enter the trigger space from the bottom ( toggleActions: "restart reverse restart reverse" ) on all the timelines.

 

why is it breaking? any clue?

See the Pen ExpqdBg by JayBERLIN (@JayBERLIN) on CodePen

[Rodrigo]

Hi,

 

I see that everything in the codepen is working exactly as it should, right? Is there an issue in the codepen? Sorry if I'm missing something obvious here.

 

As for CRA as far as I know it shouldn't cause any issues whatsoever with your GSAP animations. I see that you're using GSAP Context in all your components so that doesn't seem to be the issue.

 

It would be ideal if you could create an reduced example in Stackblitz (select React Javascript for CRA setup) so we can take a look at it (try to keep it as small as possible and point us directly to the part/line number that is not working).

 

Happy Tweening!

[FirstEight]

well i will make a stackblitz soon,

 

yea everything's alright in the codepen itself. i really dont know why its breaking apart in my CRA

 

on the screenshot i scrolled down and it stays like this. it starts to play when i go to top again. but not everything works. its more like a big cup of bug-noodels.

 

T_T  -  well lets see -

 

thank you for your first response