• Stars
    star
    271
  • Rank 148,133 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 10 years ago
  • Updated over 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React animation mixin.

react-animate

Allows to animate parts of a React components programmatically, without bypassing React internals and without altering the DOM directly.

It works by interpolating intermediate styles values and applying them to special state keys containing the styles, on each animation frame using requestAnimationFrame.

Multiples animations can be run concurrently since each animation is identified by a name. Different names target different animations.

Usage

Fully embracing ES6 classes, react-animate allows you to extend a React.Component and add new methods without collision using ES6 Symbol. Such an extended class can be created by using Animate.extend(Component). The new methods are accessible using either method call delegation or Symbol dereferencing:

this[Animate['@animate']](...);
// or equivalently
Animate.animate.call(this, ...);

The extended component gets three new methods: Animate['@animate'], Animate['@getAnimatedStyle'], and Animate['@abortAnimation'] (the latter being of limited use under normal circomstances - because Animate takes care of aborting running animations before unmounting - but can prove useful sometimes to actually interrupt a running animation).

Trigger an animation with animate, and inject the associated style in the render function using getAnimatedStyle:

Animate.extend(class MyComponent extends React.Component {
  fadeIn() {
    // syntax using call delegation
    Animate.animate.call(this,
      'my-custom-animation', // animation name
      { opacity: 0 }, // initial style
      { opacity: 1 }, // final style
      1000, // animation duration (in ms)
      { easing: 'linear' } // other options
    );
    // alternate syntax using Symbol
    this[Animate['@animate']](
      'my-custom-animation', // animation name
      { opacity: 0 }, // initial style
      { opacity: 1 }, // final style
      1000, // animation duration (in ms)
      { easing: 'linear' } // other options
    );
  }

  render() {
    return <div>
      <button onClick={this.fadeIn}>Click to fade in</button>
      <div style={Animate.getAnimatedStyle.call(this, 'my-custom-animation')}>
        This text will appear soon after the click.
      </div>
    </div>;
  }
});

This module is written in ES6/7. You will need babel to run it.

API

animate(name, initialStyle, finalStyle, duration, opts)

Start an animation. Returns this for chaining.

  • name can be any string. If you restart an animation with the same name, the previous animation with the same name will be cancelled and replaced by this one.

  • initialProperties and finalProperties are styles hashes, like the ones used by React, eg. { fontSize: '12px' } means font-size: 12px when translated to CSS by React. If a property is specified in one of the hashed by not the other, it is assumed to remain constant over the duration of the animation.

  • duration is a number of milliseconds representing the total duration of the animation.

  • options is an optional hash of optionals parameters :

    • easing: the easing of the animation timing. Can be either a string or a { type, arguments } object. In both case, it uses d3 under the hood, refer to their docs. Defaults to cubic-in-out.

    • onTick, onAbort, onComplete: optional callbacks functions that will be invoked respectively on each tick, on animation abort, or on animation complete. They will be called with (currentStyle, progress, easedProgress). Defaults to no-op.

    • disableMobileHA: flag to prevent the heuristic addition of dummy properties to attempt to force hardware acceleration on mobiles. Defaults to false.

getAnimatedStyle(name)

Get the current value of the animated style. You can call it from render() and pass it directly as the style prop of a React DOM element such as <div>. If no animation with this name exists, it will fail silently and return an empty hash ({}).

abortAnimation(name)

Abort the animation with the given name, if it exists. Returns true if an animation with this name existed. Returns false otherwise.

Note that you don't have to call this function in componentWillUnmount. react-animate will take care of that for you.

More Repositories

1

react-armor

Protect your DOM from third-party tampering.
JavaScript
636
star
2

coding-styles

My coding styles.
398
star
3

nexus-flux

Streamlined Flux abstract interface suitable for a variety of backends.
JavaScript
241
star
4

remutable

Like Immutable, but actually Mutable with diffs and versions.
JavaScript
222
star
5

fastify-zod

Zod integration with Fastify
TypeScript
188
star
6

react-prepare

Prepare you app state for async server-side rendering and more!
JavaScript
100
star
7

directus-typescript-gen

JavaScript
84
star
8

react-traverse

React Components Magic
JavaScript
70
star
9

nexus-flux-socket.io

socket.io adapter for Nexus Flux, implementing Flux over the Wire.
JavaScript
53
star
10

react-rails-starterkit

Starter repository for React on Rails. Fork it!
JavaScript
47
star
11

typed-assert

A typesafe TS assertion library
TypeScript
47
star
12

react-css

Converts plain CSS into (optionally auto-prefixed) React-style properties map.
JavaScript
35
star
13

es6-starterkit

The future is today!
JavaScript
33
star
14

useless

Useless React hooks
TypeScript
32
star
15

react-query

React Virtual DOM querying made easy.
JavaScript
30
star
16

react-statics-styles

Declarative styles in React components with support for pre- and post-processing.
JavaScript
26
star
17

react-nexus-chat

Demo chat app using React Nexus.
CSS
18
star
18

react-styling-demo

Demos for react-animate, react-css and other React styling demos.
JavaScript
17
star
19

react-defer

React Mixin for dealing with defers/timeouts/intervals/requestAnimationFrame with less boilerplate.
JavaScript
16
star
20

react-nexus-starterkit

React Nexus Starterkit Project. Clone/fork, hack, deploy!
JavaScript
12
star
21

node-async-context

Node Async Context Monitoring & Isolation
JavaScript
8
star
22

immutable-request

Isomorphic cacheable and cancellable HTTP request than return Promise for Immutable.Map.
JavaScript
8
star
23

lifespan

Unifying callbacks removals.
JavaScript
7
star
24

typed-jest-expect

Elegant jest.expect typings for a more civilized age
TypeScript
7
star
25

isomorphic-router

Tiny, lightweight isomorphic router.
JavaScript
6
star
26

gulp-react-statics-styles

Gulp task for react-statics-styles.
JavaScript
5
star
27

tween-interpolate

Extra lightweight generic and CSS values interpolators and tweens.
JavaScript
5
star
28

typed-react-openapi

Idiomatic, strongly typed React OpenAPI integration
TypeScript
5
star
29

hypernode

Ideas and prototypes for Hypernode, a scalable, distributed JS node environment.
JavaScript
4
star
30

react-transform-props

React Component decorator for transforming props
JavaScript
4
star
31

nexus-uplink-simple-server

Nexus Uplink Simple Server (for Node).
JavaScript
4
star
32

react-nexus-app

React Nexus App skeleton.
JavaScript
4
star
33

nexus-uplink-client

Nexus Uplink Client (isomorphic).
JavaScript
4
star
34

algebraic-effects-experiments

Experiments with algebraic effects
JavaScript
3
star
35

react-esi-poc

JavaScript
3
star
36

typecheck-decorator

Runtime arguments validation as ES7 decorators.
JavaScript
3
star
37

virtual

Userland virtual methods and abstract classes for ES6.
JavaScript
3
star
38

typed-result

A liberal reinterpretation of the Result type for TypeScript
TypeScript
3
star
39

lisa-db

TypeScript
2
star
40

react-maybe-state

React Mixin for maybe getting state (defaulting to null).
JavaScript
2
star
41

otter-den

TypeScript
2
star
42

snippets

Snippets of code to copy/paste.
TypeScript
2
star
43

react-ml

JavaScript
2
star
44

http-exceptions

HTTP Exceptions with err codes.
JavaScript
2
star
45

lisa-prototype

TypeScript
2
star
46

react-nexus-todomvc

React Nexus obligatory TodoMVC. (WORK IN PROGRESS)
JavaScript
2
star
47

react-lambda

Higher order and functional utilies for manipulating React components
JavaScript
2
star
48

react-http

Universal HTTP client for use in React applications.
JavaScript
2
star
49

rotenberg.io

My homepage
Lua
1
star
50

RktTools

Wow RktTools addon
Lua
1
star
51

backend-starterkit

Node Koa/postgresql backend starterkit
JavaScript
1
star
52

typed-utilities

Strongly typed general purpose utilities
TypeScript
1
star
53

wow-scripts

Lua
1
star
54

typed-ref

TypeScript
1
star
55

wow-workbench

TypeScript
1
star
56

react-identicon

React Component for Gravatar identicons.
JavaScript
1
star
57

mindstorms-utilities

Utilities for Lego Mindstorms
JavaScript
1
star
58

netlify-cms-toolkit

Tools and utilities for Netlify CMS
TypeScript
1
star
59

nexus-events

Yet Another EventEmitter. Sane callbacks removals.
JavaScript
1
star
60

lodash-next

An extension of lodash for next level js.
JavaScript
1
star
61

remembrall-pi

Python
1
star
62

mindlogger-node

TypeScript
1
star
63

nexus-flux-rest

Nexus Flux backend using plain HTTP requests (REST-like).
JavaScript
1
star
64

workbench

JavaScript
1
star
65

where-did-i-put-it

One button to find them all
TypeScript
1
star
66

node-pg-container

Postgres containers for Node
TypeScript
1
star
67

react-ml-editor

ReactML editor with live preview and suggest-completion.
JavaScript
1
star