Create a simple animation library that have the following things. Expose the API as React Components.
- Bounce
- FadeIn and Out with easing effects
- Slide up to limit and come back to original location
- Pulse
You can make your own API names. You can use either CSS to animate, or JavaScript such as requestAnimationFrame. Either is fine.
- You can use any lib for easing effects.
- No other library
<Bounce duration={1000} delay={2000} iterationCount={true} easing={'bounce'} dropHeight={-40}> your content here </Bounce>| Property | Required | Type | Default | Description |
|---|---|---|---|---|
| duration | optional | number | 2000 | duration of animation in ms |
| delay | optional | number | 0 | delay before the animation in ms |
| iterationCount | optional | boolean | 1 | use Infinity to show animation infinitely |
| easing | optional | string | bounce | easing effect for the animation |
| dropHeight | optional | number | -20px | maximum height for the animation effect |
<FadeIn duration={1000} delay={2000} iterationCount={true} easing={'linear'} > your content here </FadeIn>| Property | Required | Type | Default | Description |
|---|---|---|---|---|
| duration | optional | number | 2000 | duration of animation in ms |
| delay | optional | number | 0 | delay before the animation in ms |
| iterationCount | optional | boolean | 1 | use Infinity to show animation infinitely |
| easing | optional | string | linear | easing effect for the animation |
<FadeOut duration={1000} delay={2000} iterationCount={true} easing={'linear'}> your content here </FadeOut>| Property | Required | Type | Default | Description |
|---|---|---|---|---|
| duration | optional | number | 2000 | duration of animation in ms |
| delay | optional | number | 0 | delay before the animation in ms |
| iterationCount | optional | boolean | 1 | use Infinity to show animation infinitely |
| easing | optional | string | linear | easing effect for the animation |
<Pulse duration={1000} delay={2000} iterationCount={true} easing={'linear'} > your content here </Pulse>| Property | Required | Type | Default | Description |
|---|---|---|---|---|
| duration | optional | number | 2000 | duration of animation in ms |
| delay | optional | number | 0 | delay before the animation in ms |
| iterationCount | optional | boolean | 1 | use Infinity to show animation infinitely |
| easing | optional | string | linear | easing effect for the animation |
<SlideUpDown duration={1000} delay={2000} iterationCount={true} easing={'linear'} maxHeight={-40}> your content here </SlideUpDown>| Property | Required | Type | Default | Description |
|---|---|---|---|---|
| duration | optional | number | 2000 | duration of animation in ms |
| delay | optional | number | 0 | delay before the animation in ms |
| iterationCount | optional | boolean | 1 | use Infinity to show animation infinitely |
| easing | optional | string | linear | easing effect for the animation |
| maxHeight | optional | number | -20px | maximum height for the animation effect |