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