0.2.2 • Published 4 years ago
resap v0.2.2
Resap
React hooks for easy GSAP animations, cause why not?
npm install resap
- useToggle (toggles GSAP animation from base css styling to stated animation based on state changes)
//import useToggle from resap library
import { useToggle } from 'resap'
// create your state!
const [open, set] = React.useState(true);
// create a handler to change your state
const handleClick = () => {
set(!open);
};
// set your gsap animation props! (use useRef or useMemo so the object doesn't get recreated on each render!)
const { current: animProps } = React.useRef({
opacity: 0,
y: 30,
duration: 0.2,
ease: 'power3.out',
});
// call the useToggle hook which returns a ref, passing in your state and the animation props!
const ref = useToggle(open, animProps);
// pass your ref to the object you wish to animate! when your state changes the toggle animation will trigger!
return (
<div ref={ref} onClick={handleClick} />
)
(More hooks to be included!)
0.2.1
4 years ago
0.2.0
4 years ago
0.1.16
4 years ago
0.1.17
4 years ago
0.1.18
4 years ago
0.1.19
4 years ago
0.2.2
4 years ago
0.1.12
4 years ago
0.1.13
4 years ago
0.1.14
4 years ago
0.1.15
4 years ago
0.1.11
4 years ago
0.1.10
4 years ago
0.1.9
4 years ago
0.1.8
4 years ago
0.1.2
4 years ago
0.1.7
4 years ago
0.1.4
4 years ago
0.1.3
4 years ago
0.1.6
4 years ago
0.1.5
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago