MarkusJackson

Ok, I got it myself...I was that blind. It costs me hours to recognize that i have to use "centerLabel.current" instead of just "centerLabel".

I have a React App with a functional compoment where I use an little GSAP Animation. Today I tried to migrate the App from vanilla JS to TypeScript and I started with that little Component: interface Props {} const Item1Content: React.FC<Props> = ({}) => { let centerLabel = useRef(null); const timeLine = useRef<TimelineLite | null>(null); useEffect(() => { timeLine.current = new TimelineLite({ paused: true }); timeLine.current.to(centerLabel, 0.5, { opacity: 0.1 }); }, []); return ( <> <CarouselItemWrapper backgroundImage={background} backgroundImageVerticalPosition={"bottom"} > <CenterLabel ref={centerLabel}>blupp blupp</CenterLabel> </CarouselItemWrapper> </> ); }; export default Item1Content; The code works fine as .js file (there is actually a second useEffect that plays the animation. I deleted it for error search), but when I turn it to .tsx I get the following error in the browser: TypeError: can't define property "_gsap": Object is not extensible The cause is that line: timeLine.current.to(centerLabel, 0.5, { opacity: 0.1 }) So do I get that right? The TimeLineLite-Object that is referenced behind timeLine.current is not allowed to get add new properties, which the problem line is trying to do? The error was always there, but javascript just did not care and added the property anyways, but typescript is that strict that it tells me "no way, do it right!"? But how can I do it right? Sorry, that there is no Codepen-Link.... I dont know how to demonstrate that TypeScript-only errors. Thanks