npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-state-animator

v1.0.7

Published

Ultra lightweight full featured animation library built specifically for React and vanilla JavaScript. Tween any React component state properties or DOM styles and attributes. An advanced normalizing SVG morphing plugin for paths is included!

Downloads

17

Readme

Plutonium [react-state-animator]

Ultra lightweight React / JavaScript Animation Library

Full featured animation library built specifically for React and vanilla JavaScript. Tween any React component state properties or DOM styles and attributes. An advanced normalizing SVG morphing plugin for paths is included!

Gain precision control over your animations with custom event listeners and an advanced API that includes pausing, seeking, repeating, direction change, delays, duration, fill modes, and much more.

Animations work in all modern browsers including Edge, plus many older browsers.

Script Size

File | Uncompressed | Compressed :--- | :---: | :---: plutonium | 14K | 5K morph plugin | 6K | 3K total | 20K | 8K

Links

Bookmarks

Installation

> npm install react-state-animator

:arrow_up_small:

Usage

  • Module

    In ES6 the code example below imports the core animator library plus the SVG morph plugin.

    import Animator, {morph} from 'react-state-animator';

    Or when using CommonJS...

    const Animator = require('react-state-animator').animator;
    const morph = require('react-state-animator').morph;
  • CDN Script Tags

    Add the core animator library and optional plugin scripts directly to a web page.

    <script src="https://cdn.jsdelivr.net/npm/react-state-animator@1/lib/min/animator.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-state-animator@1/lib/min/morph.js"></script>

:arrow_up_small:

Instantiation

Instantiate a new animator object with the desired plugins. Each animator instance can have any number of animations added to it, and can be controlled as a group (play, pause, etc...).

//example 1: module (reference names can be customized using import 'as')
var myAnimator = new Animator({
    morph:morph
});

//example 2: script tags ('PU_Animator' is a global window property and plugin names are predefined)
var myAnimator = new PU_Animator({
    morph:true
});

:arrow_up_small:

Adding React State Properties

Animation keys can be added to the state properties of any React component. The easiest way to do this is in the constructor of the component as shown below.

constructor (props) {
    super(props);
    this.state = {
        //a custom rotate animatmion property
        myAnimation:{
            rotate:{val:0, keys:{
                from: 0,
                to: 360
            }},
        }
    }
}

Optionally specify key positions as follows.

rotate:{val:0, keys:{
    "pos_0": 0,
    "pos_50": 180
    "pos_100": 360
}},

To apply the animated rotate state property shown above, reference it in your components JSX as you would any other custom state property.

render() {
    return <div
        style={{
            position:'fixed',
            top:'25%',
            left:'25%',
            width:'50%'
            height:'50%'
            backgroundColor:'red',
            //reference the 'val' property, this is what will get tweened by the animator
            transform:'rotate('+this.state.myAnimation.rotate.val+')',
        }}
    />;
}

:arrow_up_small:

Animating React State Properties

In your react component constructor add a new animation to the animator object you created earlier.

The add method takes 4 arguments (objects, duration, id, props). Set the 'id' to match the custom id used to define the animation keys in the state and set 'objects' to this react component.

var myAnimation = myAnimator.add(this, 2, 'myAnimation', {
    timing:'ease',
    delay:0,
    direction:'alternate',
    iterationCount:'infinite',
    fillMode:'both',
    playState:'running'
});

Test in the browser, if everything was setup correctly you will see a red DIV rotating back and forth. The animation properties and functionality such as timing, delay, etc..., mimic standard CSS animation properties.

:arrow_up_small:

Animating DOM Elements

Animating DOM elements is similar to animating React components with one difference. Instead of specifying a state property id for the third argument we supply an object of values to animate.

//example 1: Animate an element ('myElm') over a 2 second duration to the specified value.
var myAnimation = myAnimator.add(myElm, 2, {transform:'rotate(360deg)'});

//example 2: Animate from the specified style value to the current style value by reversing the direction.
var myAnimation = myAnimator.add(myElm, 2, {transform:'rotate(360deg)'}, {
    direction:'reverse'
});

//example 3: Animate using the provided keys.
var myAnimation = myAnimator.add(myElm, 2, {
    transform:{
        keys:{
            from:'rotate(0deg)',
            to:'rotate(360deg)'
        }
    }
});

//example 4: Add optional properties as needed.
var myAnimation = myAnimator.add(myElm, 2, {transform:'rotate(360deg)'}, {
    timing:'ease',
    delay:0,
    direction:'alternate',
    iterationCount:'infinite',
    fillMode:'both',
    playState:'running'
});

When animating using a single value instead of keys a matching initial attribute or inline style value should be applied to your DOM element. If the corresponding initial value is not found the animator will create an initial value of 0 to tween to or from.

:arrow_up_small:

API Control

Below are a few quick examples of how to control your animations.

//example 1: Pause the animation.
myAnimation.pause();

//example 2: Optionally use 'setProps' to change any of the animation properties.
myAnimation.setProps({
    playState:'paused'
});

//example 3: Set the direction with setProps.
myAnimation.setProps({
    direction:'reverse'
});

//example 4: Change the direction with the changeDirection method.
myAnimation.changeDirection();

License

Released under the MIT license

Author: Jesse Dalessio / Plutonium.dev

:arrow_up_small: