what does the xys in config mean?

[branlok]

i found this sample code, but i cant understand what xys means? can someone explain to me? Thank you!
https://codesandbox.io/s/l2pqqzqmmq?file=/src/index.js

[joshuaellis]

xys is the name of an arbitrary prop in the useSpring hook in the form of an array. If you passed it directly to the animated component it wouldn't do anything because it doesn't relate to a css prop, hence why we interpolate the value: props.xys.to(trans), where trans is a function returning a string of CSS props:

const trans = (x, y, s) => `perspective(600px) rotateX(${x}deg) rotateY(${y}deg) scale(${s})`;

The example you've shared uses an old version of react-spring but i've updated it to the most up to date, see: https://codesandbox.io/s/tilt-card-with-react-spring-hooks-forked-cqx46?file=/src/index.js

[branlok]

thank you!