Negative Spring? #1977
Unanswered
CodingButter
asked this question in
Support
Replies: 2 comments
-
I achieved it pretty simply after a lot of playing around. const spread = 90
const [springs, api] = useSprings(items.length, (index) => ({
opacity: 0,
x: 0,
y: 0,
rotateZ: 0,
negZ: new SpringValue(0),
}))
....
api.start((index) => ({
config: { mass: 5, tension: 2000, friction: 200 },
opacity: open ? 1 : 0,
x: open ? 30 : 0,
y: open ? 30 : 0,
rotateZ: open ? (spread / items.length) * index : 0,
negZ: open ? -1 * (spread / items.length) * index : 0,
}))
....
{springs.map(({ negZ, rotateZ, ...style }, index) => (
<a.div key={index} className="absolute top-0 left-0" style={{ rotateZ }}>
<a.div className={`absolute`} style={{ rotateZ: negZ, ...style }}>
{items[index]}
</a.div>
</a.div>
))} is there a more in depth version of the documentation. I feel like there so much I cant find |
Beta Was this translation helpful? Give feedback.
0 replies
-
If we take your example here: const [springs, api] = useSprings(items.length, (index) => ({
opacity: 0,
x: 0,
y: 0,
rotateZ: 0,
})) you can interpolate a particular value of springs: return springs.map(({rotateZ}) => <animated.div style={{ rotateZ, rotateY: rotateZ.to(val => val * -1) />) in regards to documentation, there is a beta docs currently in works – beta.react-spring.dev |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Is there a simple method for using the negative value of a spring such as rotating a container with rotateZ and rotating its children by the negative version as to keep them facing correctly?
Beta Was this translation helpful? Give feedback.
All reactions