k1ngy.eth

How can I get these animations to start at the same time? const tl1 = gsap.timeline({ scrollTrigger: { trigger: '.sky-container', end: '+=' + window.innerHeight / 3, scrub: 0.5, pin: true } }); const tl2 = gsap.timeline({ scrollTrigger: { trigger: '.sky-container', end: '+=' + window.innerHeight / 3, scrub: 0.5 } }); tl1.to(year1, { opacity: 1, transform: 'translateX(0)' }) .to(year2, { opacity: 1, transform: 'translateX(0)' }) .to(year3, { opacity: 1, transform: 'translateX(0)' }) .to(year4, { opacity: 1, transform: 'translateX(0)' }) .to(year5, { opacity: 1, transform: 'translateX(0)' }) .to(year6, { opacity: 1, transform: 'translateX(0)' }); tl2.to(circle1, { opacity: 1, height: 40, width: 40, top: 0, left: 0, ease: 'none' }) .to(line1, { opacity: 1, width: '130' }) .to(circle2, { opacity: 1, height: 40, width: 40, top: 0, left: 0, delay: -0.3 })

PLease delete

Currently I am creating a timeline in each component on my screen, but it seems buggy with getting things to animate with scrollTrigger. Should I forward my refs up to the parent screen component which contains all the components and just do a single gsap timeline there? So all the timeline gsap stuff will be in this parent component?

That was it! Thank guys

C:/Working Folder/Website/WebPortal/Portal/ClientApp/src/components/salesPage/SalesIntro.tsx TypeScript error in C:/Working Folder/Website/WebPortal/Portal/ClientApp/src/components/salesPage/SalesIntro.tsx(43,6): Type 'RefObject<HTMLDivElement | undefined>' is not assignable to type 'string | Element | ArrayLike<string | Element | null> | null | undefined'. Property 'length' is missing in type 'RefObject<HTMLDivElement | undefined>' but required in type 'ArrayLike<string | Element | null>'. TS2322 41 | duration: 1.5, 42 | scrollTrigger: { > 43 | trigger: leftEl, | ^ 44 | }, 45 | }, 46 | }); https://stackoverflow.com/questions/72542030/type-refobjecthtmldivelement-is-not-assignable-to-type-domtarget-undefine Please answer the question on stackoverflow or here. This is blocking me badly!