function MoveMe() { const [ moveMe, toggleMoveMe ] = useState(false); const move = useSpring({ transform: moveMe ? 'translate(0,0)' : 'translate(0,150px)' }); return ( <div> <button onClick={() => toggleMoveMe(!moveMe)}>Toggle</button> <animated.h6 style={move}> Going up... </animated.h6> </div> ); }
// function TranslateInterpolation() { const [ moveMe, toggleMoveMe ] = useState(false); const { color, y } = useSpring({ y: moveMe ? 150 : 0, color: moveMe ? '#000' : '#FFF' }); return ( <div> <button onClick={() => toggleMoveMe(!moveMe)}>Toggle</button> <animated.h6 style={{ color, transform: y.interpolate(y => `translate(0,${y}px)`) }} > {' '} Going Down...{' '} </animated.h6> </div> ); }
// // function ScaleMe() { const [ isBig, toggleIsBig ] = useState(true); const size = useSpring({ fontSize: isBig ? '5em' : '1em', margin: 0 }); return ( <div style={{ height: '155px' }}> <button onClick={() => toggleIsBig(prev => !prev)}> Size Me</button> <animated.h6 style={size}> Surpise! </animated.h6> </div> ); }