Nuclear Pumpkin Mocha

    @blackbox-vision/styled-animation
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.1 • Public • Published

    Styled Animation npm version License: MIT Known Vulnerabilities

    Handle animations with style 😎. Check out the demo.

    Installation

    YARN

    yarn add @blackbox-vision/styled-animation

    NPM

    npm install --save @blackbox-vision/styled-animation

    Usage

    Styled-animation supports all the animations provided by react-animations

    The usage is really simple:

    import { Animation } from '@blackbox-vision/styled-animation';
    import React from 'react';
    import ReactDOM from 'react-dom';
    
    const Example = () => (
      <Animation name="fadeOutDown" duration="2s" timing="ease-out">
        Hey!, i'm animated!
      </Animation>
    );
    
    ReactDOM.render(<Example />, document.getElementById('root'));

    Also is possible to merge multiple animations, separating each animation name by a space:

    import { Animation } from '@blackbox-vision/styled-animation';
    import React from 'react';
    import ReactDOM from 'react-dom';
    
    const Example = () => (
      <Animation name="shake bounce">Hey!, i'm mixed!</Animation>
    );
    
    ReactDOM.render(<Example />, document.getElementById('root'));

    Props

    Animation component use the following props:

    Properties Types Default Value Description
    name string none Name or names of the animations to start.
    duration string none Indicates the duration of the Animation.
    timing string none Indicates the timing of the animation.
    fillMode string none Indicates the animation-fill-mode value.
    onStart Function none Callback called when the animation keyframes start.
    onEnd Function none Callback called when the animation keyframes finish.

    Issues

    Please, open an issue following one of the issues templates. We will do our best to fix them.

    Contributing

    If you want to contribute to this project see contributing for more information.

    License

    Distributed under the MIT license. See LICENSE for more information.

    Install

    npm i @blackbox-vision/styled-animation

    DownloadsWeekly Downloads

    6

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    19.3 kB

    Total Files

    13

    Last publish

    Collaborators

    • jonatansalas
    • manutuero