OSUblake

And that's not a component. It's just a normal JavaScript class and would work the same even if you didn't include React, so leave it as is. A class component extends React. class MyComponent extends React.Component { }

My suggestion would be to keep it as a class. Don't break something that isn't broken. Function components just make animation code harder to follow and reason about. If you really want to continue forward, then I would suggest go through our React Guides first as they are mostly focused on function components.

Welcome to forums @seungguini You should always create your timelines inside a hook. // only need to use a ref if you are tring to access // the master timeline elsewhere const masterTimeline = useRef(); useLayoutEffect(() => { const introTimeline = gsap.timeline() .from(hiText.current, { y: "+=10", opacity: 0, duration: 1.5, ease: "power4.easeInOut", }) .from(iAmAText.current, { y: "+=10", opacity: 0, duration: 1.5, ease: "power4.easeInOut", }) .to(cursor.current, { opacity: 0, ease: "power0", repeat: -1, yoyo: true, repeatDelay: 0.5, }); const occupationTimeline = gsap.timeline() .add(typeOccupation(occupation.current, "a CS Major", 1)) .add(typeOccupation(occupation.current, "a Software Developer", 1)) .add(typeOccupation(occupation.current, "a NLP Researcher", 1)) .add(typeOccupation(occupation.current, "a Computer Science Tutor", 1)) .repeat(); masterTimeline.current = gsap.timeline({ paused: true }) .add(introTimeline) .add(occupationTimeline); return () => masterTimeline.current.kill() }, []) Be sure to check out our React Guide for more details.

No worries! That has happened to all of us.

We don't have the resources to help build out custom solutions, but you should start by working out values that don't make sense, like scrDistObj.maxY. That's 0, so there's nothing to scroll.

You would need to rework using your container as the scroller. ST = ScrollTrigger.create({ animation: tween, scrub: true, scroller: container });

Every tween you have is calling doBackground. You need to add it conditionally like this. let vars = {duration:0.55, yPercent:100, stagger:0.03,ease:'power4.out'}; if (index === 1) { vars.onComplete = doBackground; } tl.from(chars.chars, vars, ">-30%") Or you could just put the callback in your timeline. if (index === 1) { tl.add(doBackground) }

Pixi objects don't work with three.js and vise versa. If you need color matrix filter for three.js, you'll need to find a shader that can do that. I'm sure someone has already written one for three.js.

Also, you never need to do this. var currTrans = $("#hat").css('-webkit-transform').split(/[()]/)[1]; var posx = currTrans.split(',')[4]; var posy = currTrans.split(',')[5]; Just use GSAP's get property. https://greensock.com/docs/v3/GSAP/gsap.getProperty() let x = gsap.getProperty(".foo", "x"); let y = gsap.getProperty(".foo", "y");

Hi fionchadd Coordinates can be really confusing in SVG, so here's how to make this easier. Initially have your hat and drop area sitting in the top left corner, so their initial coordinates will be 0,0. Now use GSAP to position the hat and drop box. gsap.set("#hat", { x: 200, y: 200 }); gsap.set("#droparea", { x: 500, y: 100 }); Or even better, also have your items centered. gsap.set("#hat", { xPercent: -50, yPercent: -50, x: 200, y: 200 }); gsap.set("#droparea", { xPercent: -50, yPercent: -50, x: 500, y: 100 }); Now when you have a hit, just to move the hat to the coords you set for the drop area. gsap.to("#hat", { x: 500, y: 100 })

Can you please make a minimal demo with those logs. It looks like there is a solution.

I think you had the right idea with your timeLapse object. You can get the object using bracket notation. let item = timeLapse[value]; Day to night (codepen.io)

Welcome to forums @tpinne You can use onUpdate in each of your ScrollTriggers to set the progress. Can you put that in a minimal demo?

Don't know if this will help because you didn't provide a minimal demo, but you should create and kill your ScrollTriggers with useLayoutEffect. That will also fire a tad earlier than useEffect.

You can create a minimal demo on CodeSandbox. It has every environment/framework available. https://codesandbox.io/