Anima.js - CSS Animation library controlled by React-Transition-Group
npm install anima-jsAnima.js - SCSS/SASS Animation library.
With Anima.js you can write compact code using the transitions and animations controlled from javascript.
npm:
``bash`
npm install anima-js --save
yarn:bash`
yarn add anima-js
`jsx
import useAnima from "anima-js";
const App = ({ isVisible }) => {
const { anima } = useAnima();
return (
Hello world
)
}
`scss
.title {
@include in {
opacity: 1;
transition: opacity .5s;
}
@include out {
opacity: 0.5;
transition: opacity .25s;
}
}
`
I recommend using special mixins for shorter code
`scss
@mixin in {
&[class$="enter"] {
@content;
}
}
@mixin out {
&[class$="exit"] {
@content;
}
}
@mixin animation-in($animation: 1s 0s both) {
&[class$="enter"] {
$name: anima-#{unique-id()};
animation: #{$name} $animation;
@keyframes #{$name} {
@content;
}
}
}
@mixin animation-out($animation: 1s 0s both) {
&[class$="exit"] {
$name: anima-#{unique-id()};
animation: #{$name} $animation;
@keyframes #{$name} {
@content;
}
}
}
`
A callback that will fire when an animation starts.
`tsc`
onAnimaStart: (in: boolean, node: HTMLElement) => void
A callback that will fire when an animation has finished.
`tsc`
onAnimaDone: (in: boolean, node: HTMLElement) => void
A callback that fires before an animation starts.
If you want to use custom animation you need this method.
`tsc`
onAnimaTransition: (in: boolean, node: HTMLElement, done: Function) => void
Sometimes you need to use custom components.
`jsx
const MyComponent = ({ children }) => (
{children}
)
Hello world
``