Niom

Creating the demo helped me findind the problem. Even though the [count] was one problem, the game changer was the missing (self) inside the const ctx = gsap.context((self) => Thank you again

Hi everyone, I'm pretty new to both react and GSAP animation. I'm basically trying to reproduce this effect here: The main difference is that instead of changing the innerHTML of an element, I want to update a variable in state, to, for example, change the value of an input fied and in the future a progress bar. const [count, setCount] = React.useState(0); useLayoutEffect(()=>{ gsap.registerPlugin(ScrollTrigger) const ctx = gsap.context(() => { const myObj = { val: 0 }; gsap.to(myObj, { val: 1000, duration: 5, ease:"none", onUpdate: () => { setCount(myObj.val) }, scrollTrigger: { trigger: '#hallo', start: 'top center', end: '+=500', markers: true, scrub: true } }) }); return () => ctx.revert(); },[count]) return( <div id={'hallo'}><Input value={count}/></div> ); I must be doing something wrong, it would be amazing if someone could help me out. Thank you in advance