FirstEight
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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
-
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.
-
1
-
-
-
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 :)
CRA is Breaking the ScrollTrigger
in GSAP
Posted
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