animazing v2.0.0
Animazing
New in 2.0.0 - Switched to GSAP for animations handling. Now animations are smoother and more customizable. Also there is Custom component for those of you who want to make custom animations. It supports GSAP-like objects. Check the updated docs!
If you have any questions or recommendations don't hesitate to contact our developers at dev@stan.vision or fill issues at github!
Simple and customizable React wrapper component using GSAP animations.
Github repo: https://github.com/StanVision/animazing
Installation
npm install animazingor
yarn add animazingUsage
import 'Animazing' from 'animazing';
<Animazing type="" origin="">
whatever-you-want
</Animazing>Animations
So far we developed 6 simple css animations. More to come very soon!
fade
scale
show
reveal
blur
hinge
Now there is a custom component! Make whatever animation you like. Nest animazing components in one another or whatever you came up with! You can do complex animations.
For examples and more details please visit our page https://stan.vision/animazing
Options
type
name (for Custom animazing)
origin
method
threshold (for Intersection Observer method only)
entryDelay
leaveDelay
entryDuration
leaveDuration
entryTimingFunction
leaveTimingFunction
background (for the reveal animation)
showInner (for the reveal animation)
All options can be either globally specified (in animazing.config.json) or per animation as props!
For details please visit our page https://stan.vision/animazing#options
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.