Package Exports
- animazing
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (animazing) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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 animazing
or
yarn add animazing
Usage
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.