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

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?

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.

CodePen Demo https://codepen.io/JayBERLIN/pen/WNKjvBQ

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 :)