React components for the Web Animations API - http://react-web-animation.surge.sh

Related tags

react-web-animation
Overview

react-web-animation

react-web-animation is a set of React components that expose the Web Animations API in a declarative way.

build status npm version npm downloads semantic-release Commitizen friendly

Demos

Check out how you can use it here - http://react-web-animation.surge.sh

Why?

Why use this over other animation libraries for React? react-web-animation uses the Web Animations API polyfill so eventually it will use the native browser implementation and not depend on any third-party animation frameworks or CSS. Chrome has the greatest support for these today and if you view the source on the demos, you can see it isn't using CSS at all!

Web Animations API

Want to know more about the Web Animations API? Here are some great resources.

Installation

react-web-animation requires the following peer dependencies to be installed

npm install react
npm install react-dom
npm install prop-types
npm install react-web-animation

react-web-animation has a runtime dependency on the next version Web Animations API polyfill. The easiest way to get this is to grab it from cdnjs and include it in your application.

<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.1/web-animations-next.min.js"></script>

Features

  • Animate Single Elements with a <Animated.[componentName]> e.g. <Animated.div> and control play state (play, pause, stop, reverse)
  • Animate Single Elements with a <Animation> and control play state (play, pause, stop, reverse)
  • Animate Multiple animations in parallel with a <AnimationGroup>, controlling them with one timeline
  • Animate Multiple animations serially with a <AnimationSequence>, controlling them with one timeline

Usage

Creating an animated element is as simple using an <Animated.[elementName]> component and supplying keyframes and a timing config.

import React, { Component } from 'react';
import { Animated } from 'react-web-animation';


export default class Basic extends Component {

    getKeyFrames() {
        return [
            { transform: 'scale(1)',    opacity: 1,     offset: 0 },
            { transform: 'scale(.5)',   opacity: 0.5,   offset: 0.3 },
            { transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 },
            { transform: 'scale(.6)',   opacity: 0.6,   offset: 1 }
        ];
    }

    getTiming( duration ) {
        return {
            duration,
            easing: 'ease-in-out',
            delay: 0,
            iterations: 2,
            direction: 'alternate',
            fill: 'forwards'
        };
    }

    render() {
        return
            <Animated.div keyframes={this.getKeyFrames()}
                       timing={this.getTiming(2500)}>
                    Web Animations API Rocks
            </Animated.div>;
    }
}

Advanced Usage

For more advanced usage, head over to the source documentation or check out the http://react-web-animation.surge.sh

License

MIT

Issues
  • Problem with `dangerouslySetInnerHTML`?

    Problem with `dangerouslySetInnerHTML`?

    Hi, I was glad being able to use react-web-animations, cool library!

    I found something strange when I have an element with dangerouslySetInnerHTML inside <Animation/>. Simply, the dangerouslySetInnerHTML content is not displayed before onPlay. Once trigged play, it would be fine.

    Also tried all possible fill options, got the same behavior.

    If I use <Animation/> inside a wrapper component, and force shouldComponentUpdate of the wrapper, I see that both before and after animation the dangerouslySetInnerHTML is lost, while only during the animation they are displayed.

    Any ideas? Could this be a react thing?

    Needs PR Needs Investigation 
    opened by t47io 8
  • Ensure name is provided to define() in UMD build

    Ensure name is provided to define() in UMD build

    RequireJS needs to know which name to register an AMD module under. The name was previously mixing; this PR fixes that.

    opened by appsforartists 6
  • Bulky build size with `lodash.isequal`?

    Bulky build size with `lodash.isequal`?

    Hi, I was examining the output of npm run build:umd:min -- --display-modules, and found the lodash.isequal is incredibly large:

    npm run build:umd:min -- --display-modules
    
    > [email protected] build:umd:min /Users/siqitian/Desktop/react-web-animation
    > cross-env NODE_ENV=production webpack src/index.js dist/react-web-animation.min.js "--display-modules"
    
    Hash: cf2f4056f2768d51e2b0
    Version: webpack 1.14.0
    Time: 1685ms
                         Asset   Size  Chunks             Chunk Names
    react-web-animation.min.js  25 kB       0  [emitted]  main
       [0] ./src/index.js 1.64 kB {0} [built]
       [2] ./src/animatable.js 4 kB {0} [built]
       [3] ./src/effect.js 7.77 kB {0} [built]
       [4] ./src/mixins/playable.js 4.01 kB {0} [built]
       [5] ./~/lodash.assign/index.js 16.7 kB {0} [built]
       [6] ./~/lodash.isequal/index.js 49.6 kB {0} [built]
       [7] ./src/animation.js 5.4 kB {0} [built]
       [8] ./src/animation_group.js 1.95 kB {0} [built]
       [9] ./src/animation_sequence.js 1.99 kB {0} [built]
      [10] (webpack)/buildin/module.js 251 bytes {0} [built]
        + 1 hidden modules
    

    Would it sound like a good idea if we use lodash ^4.11.0 but import with:

    import _isEqual from 'lodash/isEqual';
    
    enhancement Needs Investigation 
    opened by SiqiTian-minted 5
  • Honor playState when set in initial props

    Honor playState when set in initial props

    This allows effects to begin in a paused state, etc

    opened by nevir 4
  • Is letting webanimations-js modify the DOM a React way of doing things?

    Is letting webanimations-js modify the DOM a React way of doing things?

    Hi, we were just evaluating your library for use in a project. We were looking for something that does exactly this, but I'm just wondering how you get around the issue of manipulating the DOM outside of React.

    Typically this would be considered bad practice right? If the component you were animating were to re-render and be setting its own inline styles during that render, would you not have issues with styles getting overwritten?

    I'm slightly confused though, because in practice, the animation overwrites any style props that it is modifying (doesn't change any other ones). Setting the fill mode to 'none' removes the issue of losing conflicting styles at the end, but it still feels strange to be letting the DOM be manipulated outside of React.

    I've had a quick look through the source and can't see any sort of magic like that described by ryanflorence here (https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md).

    Just wondering if I'm missing something here.

    Cheers

    question 
    opened by lukebatchelor 4
  • Errors when rebuilding the project

    Errors when rebuilding the project

    I am trying to rebuild react-web-animation to write a patch but I get errors when I run npm install:

    ERROR in ./src/animation.js
    Module not found: Error: Cannot resolve module 'immutable' in /home/laaglu/git/forked/react-web-animation/src
     @ ./src/animation.js 13:17-37
    

    Indeed, the package.json declares 'immutable' as a peer dependency. Shouldn't 'immutable' be declared as a regular dependency as is it actually used by the code, notably in Animation.js ? import { Map, is } from 'immutable';

    I tried that and it seemed to fix the problem for me.

    opened by laaglu 4
  • Wrapping imported Component with Animatable throws

    Wrapping imported Component with Animatable throws "Illegal Invocation"

    Firstly, I'm super excited about this project!

    I might be missing something so I apologize if I am.

    When I try to import a component, say Box.js and animate it within AnimationGroup I get the error: "Illegal Invocation" on GroupConstructors.js which looks like part of the polly fill.

    The same render method from Box.js works fine if used directly within Animatable.

    This below throws the error.

    Box.js

    import React, { Component, PropTypes } from 'react';   
    
    export default class Box extends Component {           
        constructor(props) {                               
            super(props);                                  
        }                                                  
    
        static propTypes = {                               
            className: PropTypes.string,                   
            children: PropTypes.node,                      
        };                                                 
    
        render() {                                         
            let style = {                                  
                box: {                                     
                    width: "100px",                        
                    height: "100px",                       
                    background: "gold",                    
                },                                         
            };                                             
    
            return (                                       
                <div style={ style.box }/>                 
            );                                             
        }                                                  
    }  
    

    ImportedBox.js

    import React, { Component } from 'react';
    import { AnimationGroup, Animatable } from 'react-web-animation';
    import Box from './Box';
    
    export default class ImportedBox extends Component {
        constructor(props) {
            super(props);
        }
    
        getKeyFrames() {
            return [
                { transform: 'rotate(0deg)' },
                { transform: 'rotate(360deg)' },
            ];
        }
    
        getTiming( duration ) {
            return {
                duration,
                iterations: Infinity,
            };
        }
    
        render() {
            let style = {
                viewport: { 
                    height: "100vh",
                    background: "lightskyblue",
                },
            };
    
            return (
                <div style={ style.viewport } >
                    <AnimationGroup
                    >
                        <Animatable
                            id="2"
                            keyframes={ this.getKeyFrames() }
                            timing={ this.getTiming(4000) }
                        >
                            <Box/>
                        </Animatable>
                    </AnimationGroup>
                </div>
            )
        }
    }
    
    enhancement question 
    opened by Tharon-C 3
  • Fixfinish

    Fixfinish

    Fix for issue #44

    opened by laaglu 3
  • Also ensure that currentTime is handled when an initial prop

    Also ensure that currentTime is handled when an initial prop

    This moves a bit more shared behavior into the mixin

    opened by nevir 3
  • Does this support svg?

    Does this support svg?

    opened by matt-erhart 3
  • Change componentWillReceiveProps for compatibility with recent Reac

    Change componentWillReceiveProps for compatibility with recent Reac

    react-dom.development.js:11494 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

    • Move data fetching code or side effects to componentDidUpdate.
    • If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
    • Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

    Please update the following components: Animation

    opened by Bielousov 0
  • Specificity

    Specificity

    Currently animations do not play nicely with base-level styling, for instance if I animate the backgroundColor on an element which already has background then I will not see my backgroundColor animations.

    Can we have an option to set the specificity of animate to the highest level possible, equivalent to !important in some ways, such that our animations take precedence?

    As an example, consider a div that currently has an orange background via some CSS styling, background: orange;. If I wanted to apply some keyframes as follows:

    const getKeyframes = [
      { backgroundColor: 'green' },
      { backgroundColor: 'red' }
    ]
    

    I would not see the green to red change until I remove the background: orange; style rule.

    Currently the only workaround to this is to use fill: 'forward' and to apply any base styles there with extra attributes to persist anything we don't want changing from the first keyframe.

    opened by tsujp 0
  • How can I unmount a component when its animation ends?

    How can I unmount a component when its animation ends?

    Hi, can I unmount a component when its animation ends, and could I specify this function to any component I want? Can I call a remove function at the end of the getKeyFrames function? or any way which can achieve my purpose? Besides, how can I unmount or set opacity 0 for the second component which is supposed not shown before the first component finished animation? Thanks.

    enhancement question 
    opened by jefflung 6
  • Enhancement: Allow multiple animations per element

    Enhancement: Allow multiple animations per element

    The spec allows multiple animations to be applied to each element (see here for example -http://danielcwilson.com/blog/2015/08/animations-part-3/). The current structure only allows for a single set of keyframes/timing per element.

    Implement something like -

    <Animated.div keyframes={[[...],[...]]} timing={[[...],[...]]}></Animated.div>
    
    enhancement 
    opened by bringking 0
  • Idea: Allow <Animatable> at any depth

    Idea: Allow at any depth

    It would be handy to support <Animatable> elements at any depth under a <AnimationGroup> or <AnimationSequence>. I.e.

    <AnimationGroup ...>
      <Animatable ...>
        <div>
          ohai
          <Animatable ...>
            <div>ohai2u</div>
          </Animatable>
        </div>
      </Animatable>
    

    I'm unsure what all the implications would be though. Would crawling the element tree on render going to be too much of a perf burden? Similarly, someone might be tempted to nesting <Animatable>s inside other <Animatable> - though, that should be ok, I think :P

    enhancement help wanted Needs PR 
    opened by nevir 3
Releases(v0.7.0)
Owner
Charles King
Staff Engineer working for @GhostGroup, founder of @TucsonReactJS
Charles King
⚛ A React library for smooth FLIP animations. Easily animate originally unanimatable properties like DOM positions with one hook.

React Easy Flip ⚛ A lightweight React library for smooth FLIP animations Features Animates the unanimatable (DOM positions, mounts/unmounts) One hook

Kirill Vasiltsov 246 Oct 4, 2021
React components for Velocity.js

velocity-react React components for interacting with the Velocity DOM animation library. Read our announcement blog post for details about why and how

Fabric 3k Oct 9, 2021
Build custom animation components in React using typescript

Build custom animation components in React using typescript

Hoa Xuan Vo 1 Oct 4, 2021
Animation engine designed for React

react-tweenful Looking for an amazing React library for animating stuff? Look no more, we've got you covered! Demo https://teodosii.github.io/react-tw

Rares Mardare 61 Sep 30, 2021
Scroll-based actions and animations for react

react-spark-scroll React port of spark-scroll. The future! This repo has been around for a little while now. However, recently I re-created the demo u

Gil Birman 346 Aug 30, 2021
A React component to use CSS animations to swap letters in 2 words which are an anagram of each other.

React Anagram Animation A React component to use CSS animations to swap letters in 2 words which are an anagram of each other. The text is animated in

null 2 Oct 9, 2021
Use the full power of React and GSAP together

react-gsap-enhancer Demos Why? How it works? Usage API A React component enhancer for applying GSAP animations on components without side effects. For

András Polgár 708 Sep 5, 2021
🚀 Smooth Liquid Swipe Animation to transition between different components.

?? React LiquidSwipe Very smooth component transition animation with liquid swipe effect. Loved the project? Please consider donating to help it impro

Ashutosh Hathidara 323 Oct 8, 2021
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.

React Flip Move This module was built to tackle the common but arduous problem of animating a list of items when the list's order changes. CSS transit

Joshua Comeau 3.6k Oct 12, 2021
Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height

Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height

Nikita Butenko 1k Oct 9, 2021
A spring that solves your animation problems.

React-Motion import {Motion, spring} from 'react-motion'; // In your render... <Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> {value => <div

Cheng Lou 20.2k Oct 10, 2021
⚛️ A React hook for animating components when they are mounted and unmounted. Fast and tiny.

use-animate-presence A React hook for animating components when they are mounted and unmounted (added to / removed from React tree). Features: Uses We

Kirill Vasiltsov 56 Oct 8, 2021
A React.js wrapper component to animate the line stroke in SVGs

react-mt-svg-lines Bring your SVGs to life Live Demo A React.js wrapper component that lets you trigger an "animated lines" effect within your SVGs by

Peter Morawiec 349 Jul 15, 2021
Simple typing text animation in React component

react-typing-text-animation - Simple typing text animation in React component

Damian Głuch 0 Oct 2, 2021
A React component implementing the latest version of Animate.css

react-animatecss A React component implementing the latest version of Animate.css! Zero dependencies - All self contained code Minimal package size -

Charles 14 Sep 27, 2021
✌️ A spring physics based React animation library

✌️ A spring physics based React animation library

Poimandres 21.4k Oct 6, 2021
✌️ A spring physics based React animation library

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough

Poimandres 21.5k Oct 16, 2021
Customizable Shimmer effects for React

Customizable Shimmer effects for React

Shafikul Islam 20 Oct 8, 2021
Simple React.js wrapper for StPageFlip library, for creating realistic and beautiful page turning effect

Version 2.0.0 This version fixed some bugs and is completely written with react hooks. !!! Method access api changed !!! React.js wrapper for StPageFl

Oleg 145 Oct 7, 2021