[CRA is Breaking the ScrollTrigger]

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

[CRA is Breaking the ScrollTrigger]

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

[What would a GreenSock do here? Scroll-Trigger Logic]

Well thank you.

That been good hints!

 

You made my day with that one. 
I gonna implement this. 

 

Gonna research for the utils of gsap, they promise to be useful. 

[What would a GreenSock do here? Scroll-Trigger Logic]

 

CodePen Demo

 

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

[What would a GreenSock do here? Scroll-Trigger Logic]

Hey green tinted GreatSocks,

 

i just started my first Project with socks on!  Iam glad that you all exsist.

I have some unclear points where i maybe decided a bit to fast and for sure wrong.  

 

well lets dive in @ https://underground.brainarea51.com/first8/

sorry for the 10mb header-video prototype placeholder  

 

I wanted a scroll-snap-type solution - coupled with scroll-trigger so iam using a scrollbar inside a div container as you can see.

and i use timelines for the 100dvh sections. So far so well. 

 

in the second section with those tabs expertise tabs i started to wonder, wich could be the best practice for revealing it all tab-wise instead of sectionwise.

 

here the snippet iam talking about:

 

//* -------------------------------------------------------- WHO SECTION

const whoSplit2 = new SplitType('.me .tab h3')
const whoSplit3 = new SplitType('.me .tab p')
let whoTitles = document.querySelectorAll(".me .tab .tab-title .char")
let whoWords = document.querySelectorAll(".me .tab p .word")

const whoTimeline = gsap.timeline({
  scrollTrigger: {
    trigger: "#who",
    scroller: ".contentwrap",
    start: "center 100%",
    markers: true,
    end: "center 0%",
    toggleActions: "play reverse play reverse"
  }
})

whoTimeline.from(".me .tab", {
  duration: 1,
  y: 50,
  opacity: 0,
  stagger: 0.45,
  ease: "back"
})

whoTimeline.from(".me .title-line", {
  duration: 1,
  width: "0%",
  stagger: 0.25,
  ease: "power4"
}, "-=1")

whoTimeline.from(whoTitles, {
  duration: 0.05,
  y: -50,
  opacity: 0,
  stagger: 0.04,
  ease: "power3"
}, "-=1")

whoTimeline.from(whoWords, {
  duration: 0.35,
  x: 50,
  opacity: 0,
  scale: 2,
  stagger: 0.02,
  ease: "back"
})

how can i target all expertise-tabs to set up their own trigger without repeat and hardcode it.

also the actual state is a mess on mobile, to much appearing to early and disappearing to early. I hope you can help me out a bit

 

You Guys are GREAT :)