X
Y
SCALE
ROTATE
MASS
TENSION
FRICTION
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import React from 'react'
import { useSpring, animated } from 'react-spring'
const PlayGround = () => {
const styles = useSpring({
from: {
"transform": "translateX(0px) translateY(0px) scale(1) rotate(0deg)",
"height": "5rem",
"width": "5rem",
"backgroundColor": "#d8efd4",
"borderRadius": "1rem"
},
to: [
{
"transform": "translateX(0px) translateY(0px) scale(1) rotate(0deg)",
"height": "5rem",
"width": "5rem",
"backgroundColor": "#d8efd4",
"borderRadius": "1rem"
}
],
config: {
"mass": "1",
"friction": "26",
"tension": "170"
},
})
return (
<animated.div
style={{
...styles,
}}
>
</animated.div>
)
}
export default PlayGround