One Spring Resetting Others? #1983
Unanswered
JS-GitRepo
asked this question in
Support
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
So long story short, I have a react project where useSpring is used to constantly rotate the "hue" of the background. This hueRotation exists in context, and elsewhere, Springs are being reset whenever the hueRotation reverses / resets. I'm suspicious that whenever "loop: { reverse: true }" is triggered, the component is being re-rendered and the other spring's value is being reset?
Link to demonstrate what is happening: jakesnyder.dev
Try hovering over any of the links on the home page with the cursor, and wait for the backdrop to cycle
This is the suspect spring:
const hueRotation = useSpring({ to: { filter: "hue-rotate(130deg) saturate(80%) sepia(30%)", }, from: { filter: "hue-rotate(0deg) saturate(100%) sepia(0%)", }, reset: false, cancel: bgAnimOff, reverse: hueFlip, delay: 1000, config: { duration: hueDuration, tension: 280, friction: 60 }, onRest: () => setHueFlip(!hueFlip), });
And this is the spring that it seemingly resets each time, which exists in a nested child component:
const hoverOn: any = useSpring({ to: { opacity: 0 }, from: { opacity: 1 }, reset: true, delay: 0, config: { duration: 750 }, loop: { reverse: true }, onChange: (): number => (opacityRef.current = hoverOn.opacity.get()), });
Beta Was this translation helpful? Give feedback.
All reactions