Andrew Harris

Awesome cheers! As a temporary workaround, as it can handle smaller numbers, you can divide the expected number by a factor (i.e. 10000) to make GSAP properly handle it, then in the "onUpdate" method undo the division. However, this adds extra calculations to the tween which is less than ideal.

Hiya all! i recently tried updating my site to using GSAP v3. I have a couple transitions that relied on GSAP tweening object values, it all worked perfectly, but now GSAP is updating the object with incorrect values and ending on the wrong final value. Check out my codepen for a bare minimum reproduction of the issue. The expected end state is 10000000 but GSAP is ending the tween with 121575.2192. In some cases i've seen it end with a negative number. It seems to work perfectly fine with smaller numbers under ~100000 Anyone aware of why this is happening or a way around this issue? Thank you!

Hi Rodrigo, Thanks for the reply! Haha, I wouldn't want our lord and saviour Dan Abramov to suffer a stroke ? Sorry for not being clear, i want to have a component that displays a number value that is animated up or down whenever the value changes. My actual use case is for a pricing calculator, whereby the price will animate up and down whenever a user changes parameters on other components. So yes the object values are related to the component's state, the object is merely there so GSAP can tween the value between the previous state and current state. Does that make sense? I'd done this before when i was working with JQuery & GSAP, i used a similar technique of having an object in a closure that GSAP would tween the value of and then apply the value on each update to the DOM element. Same technique as the below thread. So that's what i thought would be easiest to use again, although yes it's not the React way of doing things. As now GSAP is in control of the rendered value. I'm also not sure how you'd get GSAP to tween a React hook state value, as i thought we shouldn't ever mutate the state value directly, so would need GSAP to call a setter method. Thanks again for helping me out! Hope i'm not being confusing.

Hi there! I would like to add a scalar tween to a component in React using GSAP, the component is a functional component. I've whipped up a quick example of how i think that could be implemented in React using GSAP in the attached codepen. (Type in some number values into the input and watch GSAP tween the number below the input) It's a bit dirty as i need to add a global object to the window on the first mount of the component, so that GSAP has an object it can freely mutate without React resetting it on each render. Is there are better way of allowing GSAP to perform a scalar transition within React? Thanks for any help you can give!

I keep getting the error "uncaught exception: Cannot tween a null target." when hovering one of the buttons in this codepen demo i've created, the animation is applied to a pseudoelement, and it looks all correct to me. The second button in the demo works, but the first doesn't for some reason. Originally the two buttons were different, one with the styling i wanted to apply alongside the animation, but i kept getting this exception, so i chipped away at all the additional styling and animations until i was left with this bug. The markup, js and styling is practically identical, except with a different classname and id for the elements. Does anyone know why this would be happening? Thank you!