bringking / react-web-animation Goto Github PK

I can create a CSS Sprite as this => https://jsfiddle.net/simurai/CGmCe/

I have this code

getKeyFrames() {
    return [
      { backgroundPosition: '0px' },
      { backgroundPosition: '-500px' },
    ];
  }

  getTiming( duration ) {
    return {
      duration: 8000, 
      iterations: Infinity,
    };
  }

but the result is this

Investigate usage with Preact and Inferno

Hi,

i have this code:

<Animation
  keyframes={this.getKeyFramesLine()}
  timing={this.getTimingLine()}
  onFinish={() => this.onFinish('playText')}
>
  <div className="LineHeader" />
</Animation>

and in console i see this

warning.js:36 Warning: Unknown propsplayer,playState,timelineLengthon <div> tag. Remove these props from the element.

How can i remove this warning??

How can I find out about the end of the animation?

spec -> onfinish -> oncancel

Catched this using example from readme.
Any ideas how to fix this?

deps:
"react": "^15.3.1",
"react-dom": "^15.3.1",
"immutable": "^3.8.1"

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>

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.

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?

When test it on mobile it run ok on android, but when try to run it on ios safari, i get:

TypeError: this.node.animate is not a function. (In 'this.node.animate(this.keyframes, this.timing)', 'this.node.animate' is undefined)
startAnimation — animation.js:63
componentDidMount — animation.js:99
measureLifeCyclePerf — ReactCompositeComponent.js:75
(anonymous function) — ReactCompositeComponent.js:264
notifyAll — CallbackQueue.js:76
close — ReactReconcileTransaction.js:80
closeAll — Transaction.js:206
perform — Transaction.js:153
perform — Transaction.js:140
flushBatchedUpdates — ReactUpdates.js:172
flushBatchedUpdates
closeAll — Transaction.js:206
perform — Transaction.js:153
dispatchEvent — ReactEventListener.js:147
dispatchEvent
https://s3.amazonaws.com/infash-assets-staging/brands_icons/tommy_hilfiger_unpressed.png

Attempting to change the value of onFinish or onCancel on an animation results in an unexpected behavior: The new callback is not called and the callback set by the previous change of the onFinish property is called. Furthermore, it is not possible to reset onFinish or onCancel (make them null again) once they have been set.

I think there is a lifecycle management problem. The values of onFinish or onCancel are set in playable.attachHandlersToPlayer and taken from this.props. If one updates the props on the Animation, componentWillReceiveProps will be called. This calls in turn indirectly invokes playable.attachHandlersToPlayer. At that stage alas, the new props have not yet been set and playable.attachHandlersToPlayer sets onFinish and onCancel to the current props values, not the new ones. It also checks onFinish and onCancel for nullity which prevents resetting these props. This explains the current incorrect behavior.

I have prototyped a fix, as this problem was blocking for me. However it is a bit ugly, I have uploaded it to a branch in my repo if you want to have a look at it though.

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.

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>
        )
    }
}

Just came up an idea: since the support for web-animation API is limited, would it be a good idea to ship with the polyfill?

Polyfill: https://github.com/web-animations/web-animations-js
Support: http://caniuse.com/#search=web-animation

Hi, I got this error when I tried the Basic Sequence and Basic Group function. I have tried included next version Web Animations API polyfill in the index.html within the public directory. Please suggest how can I solve this, thanks. Besides, Basic function works fine, I think it doesn't involve the WAAPI polyfill.

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';

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

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

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

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.