roman-march / anima-js

Anima.js - CSS Animation library controlled by React-Transition-Group

Anima.js 🎞

Anima.js - SCSS/SASS Animation library.
With Anima.js you can write compact code using the transitions and animations controlled from javascript.

Download

npm:

npm install anima-js --save

yarn:

yarn add anima-js

Usage

import useAnima from "anima-js";

const App = ({ isVisible }) => {
  const { anima } = useAnima();
  
  return (
    <anima.h1 className="title" state in={isVisible}>
      Hello world
    </anima.h1>
  )
}

.title {
  @include in {
    opacity: 1;
    transition: opacity .5s;
  }

  @include out {
    opacity: 0.5;
    transition: opacity .25s;
  }
}

I recommend using special mixins for shorter code

@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;
    }
  }
}

Examples

Simple Transition

Switch Transition

Group Transition

Animated Button

Callbacks

A callback that will fire when an animation starts.

onAnimaStart: (in: boolean, node: HTMLElement) => void

A callback that will fire when an animation has finished.

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.

onAnimaTransition: (in: boolean, node: HTMLElement, done: Function) => void

Custom Components

Sometimes you need to use custom components.

const MyComponent = ({ children }) => (
  <h1>{children}<h1>
)

<anima.custom component={MyComponent}>
  Hello world
</anima.custom>