[How to play two timelines at the same time, even if one is pinned.]

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

 

[How to make both my timelines take the same length of time to complete the animations (10 seconds)]

PLease delete

 

[How to architect gsap with react components/screen. Example given.]

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? 

[Typescript bug help <3]

That was it! Thank guys

[Typescript bug help <3]

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!