0.0.1 • Published 1 year ago
emotionaljs v0.0.1
Emotional
Emotion Animation Library is an animation library that allows the creation of complex animations with React that use dynamically changing props using Emotion.
API
There are two main APIs
Animate
: Class. Use one or more of the existing animation presets.useAnimate()
: React Hook. Create a custom animation using the existing presets or scaffold a completely new animation. This is powerful as this can be used to create a Wrapper component
Class: Animate
- name
<string | string[]>
One or more presets
To use one of the presets, simply use:
import { Animate } from 'emotionaljs';
const { animation } = new Animation('fadeIn');
const StyledTooltip = styled(Button)({ theme }) => ({
display: 'relative',
'& > .Button:hover': {
animation
}
})
To use multiple presets, chain them as follows:
import { Animate } from 'emotionaljs';
const { animation } = new Animation('fadeIn', 'fadeOut');
const StyledTooltip = styled(Button)({ theme }) => ({
display: 'relative',
'& > .Button:hover': {
animation
}
})
Hook: useAnimate
import { useAnimate } from 'emotionaljs';
const animation = useAnimate({
enter: 'fadeIn',
enterFrom: undefined,
enterTo: undefined,
enterDuration: 0.2, // in seconds
enterTimingFunction: 'ease-in-out',
enterDelay: 0, // in seconds
enterFillMode: 'forwards',
enterDirection: 'reverse',
enterIterationCount: 1,
exit: 'fadeOut',
exitFrom: undefined,
exitTo: undefined,
exitDuration: 0.2, // in seconds
exitTimingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1)'
exitDelay: 0, // in seconds
exitFillMode: 'forwards',
exitDirection: 'reverse',
exitIterationCount: 1,
})
Design Patterns
- Using with CSS-in-JS
- Chaining animations with pre-built presets
- Complex custom animations
- Using as a Wrapper Component
0.0.1
1 year ago