google-fabric / velocity-react

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 we built this.

See the live demo.

Latest version: v1.4.2 Avoids react-dom warnings in test for Transition props.

Note: v1.1.0 and later require React 0.14.x Note: v1.3.0 and later require React 15.3.x and should work with React 16

Running the demo

$ git clone https://github.com/twitter-fabric/velocity-react.git
$ cd velocity-react
$ npm install
$ npm run demo

Visit http://localhost:8080/webpack-dev-server/ in your browser. Hot reloading is enabled, if you want to tweak the code in main.jsx.

Installation

The velocity-react library is provided as an NPM package:

$ npm install --save velocity-react

The VelocityComponent and VelocityTransitionGroup components, as well as the velocityHelpers utilities, are distributed as ES5-compatible JavaScript files with CommonJS require statements. You will need a dependency tool such as Browserify, RequireJS, or webpack to use them on the web.

This package depends directly on Velocity, as well as lodash for a handful of utility functions (which are required individually to try and keep bundle size down).

To use the Velocity UI Pack, which includes a library of transitions and support for the stagger, drag, and backwards options, require it along with Velocity at an entry point to your app:

  require('velocity-animate');
  require('velocity-animate/velocity.ui');

Note: Depending upon where your version of NPM places dependencies, you may need to explicitly require velocity-animate in your package.json to be able to require velocity-animate/velocity.ui.

It is assumed that your application already depends on react and react-dom at v15. If you're still at React 0.13, use v1.0.1 of this package. Other than dependencies, it is the same as v1.1.0.

Usage

VelocityComponent

Component to add Velocity animations to a child node or one or more of its descendants. Wraps a single child without adding additional DOM nodes.

Example

  <VelocityComponent animation={{ opacity: this.state.showSubComponent ? 1 : 0 }} duration={500}>
    <MySubComponent/>
  </VelocityComponent>

Details

The API attempts to be as declarative as possible. A single animation property declares what animation the child should have. If that property changes, this component applies the new animation to the child on the next tick.

By default, the animation is not run when the component is mounted. Instead, Velocity's finish command is used to jump to the animation's end state. For a component that animates out of and back in to a default state, this allows the parent to specify the "animate into" animation as the default, and therefore not have to distinguish between the initial state and the state to return to after animating away.

Properties

animation: Either an animation key or hash defining the animation. See Velocity's documentation for what this can be. (It is passed to Velocity exactly.)

runOnMount: If true, runs the animation even when the component is first mounted.

targetQuerySelector: By default, this component's single child is animated. If targetQuerySelector is provided, it is used to select descendants to apply the animation to. Use with caution, only when you're confident that React's reconciliation will preserve these nodes during animation. Also note querySelectorAll's silly behavior w.r.t. pruning results when being called on a node. A special value of "children" will use the direct children of the node, since there isn't a great way to specify that to querySelectorAll.

interruptBehavior: Specifies what should happen to an in-progress animation if the animation property changes. By default is stop, which stops it at its current position, letting the new animation use that as a starting point. This generally gives the smoothest results. Other options are finish, which jumps the animation to its end state, and queue, which will proceed with the new animation only after the old one has finished. These options may be necessary to avoid bad behavior when certain built-in effects like "slideUp" and "slideDown" are toggled rapidly.

Unrecognized properties are passed as options to Velocity (e.g. duration, delay, loop).

Methods

runAnimation: Triggers the animation immediately. Useful for when you want an animation that corresponds to an event but not a particular model state change (e.g. a "bump" when a click occurs).

VelocityTransitionGroup

Component to add Velocity animations around React transitions. Delegates to the React TransitionGroup addon.

Example

  <VelocityTransitionGroup enter={{animation: "slideDown"}} leave={{animation: "slideUp"}}>
    {this.state.renderSubComponent ? <MySubComponent/> : undefined}
  </VelocityTransitionGroup>

Properties

enter: Animation to run on a child component being added

leave: Animation to run on a child component leaving

runOnMount: if true, runs the enter animation on the elements that exist as children when this component is mounted.

Any additional properties (e.g. className, component) will be passed to the internal TransitionGroup.

enter and leave should either be a string naming an animation registered with UI Pack, or a hash with an animation key that can either be a string itself, or a hash of style attributes to animate (this value is passed to Velocity its the first arg).

Note: To make it easier to write consistent “enter” animations, the “leave” animation is applied to elements before the “enter” animation is run. So, for something like opacity, you can set it at 0 in “leave” and 1 in “enter,” rather than having to specify that “enter” should start at 0.

If enter or leave is a hash, it can additionally have a style value that is applied the tick before the Velocity animation starts. Use this for non-animating properties (like position) that are prerequisites for correct animation. The style value is applied using Velocity's JS -> CSS routines, which may differ from React's.

Any hash entries beyond animation and style are passed in an options hash to Velocity. Use this for options like stagger, reverse, &c.

Statics

disabledForTest: Set this to true globally to turn off all custom animation logic. Instead, this component will behave like a vanilla TransitionGroup.

velocityHelpers

registerEffect

Takes a Velocity "UI pack effect" definition and registers it with a unique key, returning that key (to later pass as a value for the animation property). Takes an optional suffix, which can be "In" or "Out" to modify UI Pack's behavior.

Unlike what you get from passing a style hash to VelocityComponent's animation property, Velocity "UI pack effects" can have chained animation calls and specify a defaultDuration, and also can take advantage of stagger and reverse properties on the VelocityComponent.

You will need to manually register the UI Pack with the global Velocity in your application with:

  require('velocity-animate');
  require('velocity-animate/velocity.ui');

If, even with the above statements, you see errors like Velocity: First argument (transition.shrinkIn) was not a property map, a known action, or a registered redirect. Aborting. it is likely that there are 2 copies of velocity-animate in your node_modules. Use npm dedupe to collapse them down to one.

It might also be necessary to require the velocity-animate package explicitly in your package.json.

See: http://velocityjs.org/#uiPack

Server-side rendering

The VelocityComponent and VelocityTransitionGroup components are (as of v1.0.1) tolerant of being rendered on the server: they will no-op and render their children naturally. If your initial animation end states match natural rendering this will be exactly what you want. Otherwise, you may notice a flash when the JS is applied and the initial animations are resolved.

Bugs

Please report any bugs to: https://github.com/twitter-fabric/velocity-react/issues

We welcome contributions! Note that when testing local changes against local projects you’ll need to avoid npm link since it typically will cause duplicate instances of React in the client. (You’ll often see this manifest as firstChild undefined errors.)

Acknowledgments

Thanks to Julian Shapiro and Ken Wheeler for creating and maintaining Velocity, respectively, and for working with us to release this library.

Thanks to Kevin Robinson and Sam Phillips for all of the discussions and code reviews.

License

Copyright 2017 Google Inc.

Licensed under the MIT License: https://opensource.org/licenses/MIT

velocity-react's Issues

Any way to turn off animation on demand ?

Hi,

I have an use case here where we use a VelocityTransitionGroup to animate rows entering and leaving a table. And that works great.
However we are trying to turn off the animation when filtering is applied to the table.
Is there any way we can control if animation enter/leave is happening or not ?

Thanks,

Simple example to toggle content

A simple example for swapping content with animations would be helpful for me. The example for VelocityComponent works for toggle fading a single component in and out:

<VelocityComponent animation={{ opacity: this.state.showSubComponent ? 1 : 0 }} duration={500}>
  <MySubComponent/>
</VelocityComponent>

But I'm not sure how to proceed if I want to swap one component for another with a fadeout/fadein?

minor-versioning issue?

Hi,

First, thanks for updating velocity-react to support React 15.

I wanted to inform that on my project, we had a dependency for:

"velocity-react": "^1.1.1"

In our package.json, while still using React 0.14.xx. The minor version update for this package caused 2 version of react to be loaded when deployed in production (0.14 and 15), which of course broke the build.

Maybe it will be wiser to give it a bigger version bump, since depending solely on React 15 now is a big change (or, alternatively, depending on react 0.14 and 15, I've seen other packages doing this)?

Thanks

Chaining collapse animations with their children

Hi,

I'm often looking to animate in a collapsed element, but first need to animate the parent height to uncollapse it first, then run the enter animation after a small delay... and the same in reverse to collapse the element again.

I've tried to nest VelocityTransitionGroups in an attempt to workaround the lack of support for RunSequence(), but seems that the child group does not animate at all. Could you provide an example of how to chain animations or achieve this [uncollapse-parent then delayed-enter-child, leave-child then delayed-collapse-parent] pattern?

The following only runs the parent animation

     <VelocityTransitionGroup
        component={MyComponent}
        enter={{animation: "slideDown", duration: 700, easing: "spring"}}
        leave={{animation: "slideUp", duration: 600, delay: 300, easing: "ease-in-out"}}
      >

        { showMessage ? (

          <VelocityTransitionGroup
            component={MyComponent}
            enter={{animation: "transition.bounceIn", duration: 2000}}
            leave={{animation: "transition.flipXOut", duration: 600}}
          >

            { showMessage ? (

              <MyElem>{message}</MyElem>

            ) : undefined }

          </VelocityTransitionGroup>

        ) : undefined }

      </VelocityTransitionGroup>

VelocityTransitionGroup positioning on first tick

As per the readme, I'm using the style key in the enter/leave animation hash to set absolute positioning for the child elements to not affect the container height, but the absolute positioning stays on the elements even after the enter/leave animations are complete.

I expected it to default back to its original positioning once velocity-react is done animating. Since it doesn't do this, the parent container loses height/width.

svg move animation

hi.
I need to create svg animation. I have two rectangles wraped in g component and all of them are in a react class (see the code) when I use VelocityComponent on the obj class some of the animations working, like the opacity , translateX and the fill animation but not the move X animation.

`
class Obj extends React.Component{

render(){
    return(
        <g>
            <rect x={100} y={300} width={200} height={200}/>
            <rect x={400} y={300} width={100} height={100}/>
        </g>
    );
}

}

export default class MainVelocity extends React.Component {

constructor() {
    super();
    this.state = {showSubComponent:false};
}

onClick(){
    this.setState({showSubComponent: !this.state.showSubComponent});
}

render() {
    var anim = { opacity: this.state.showSubComponent ? 1 : 0 ,
        x:this.state.showSubComponent?"+=300":"-=300",
        translateX:300,
        fillGreen:this.state.showSubComponent?255:0,
       }
    return (
        <div>
            <button onClick={this.onClick.bind(this)}>click me</button>
            <svg
                width={window.innerWidth}
                height={window.innerHeight}
            >
                    <VelocityComponent animation={anim} duration={500}>
                        <Obj/>
                    </VelocityComponent>
            </svg>
        </div>
    );
}

}
`

I could not find any tutorials on how to create svg animations with velocity-react. is it possible? and how is the library support for svg?
by the way I think the way you integrated velocity into react is great!
thanks.

Calls to window.requestAnimationFrame fail on IE 9

In velocity-transition-group.js, on lines 201 and 293, there are calls to window.requestAnimationFrame. This function is not available in Internet Explorer 9. The underlying Velocity library works on IE 9, and it looks like they solved this problem using the following shim:

/* rAF shim. Gist: https://gist.github.com/julianshapiro/9497513 */
var rAFShim = (function() {
    var timeLast = 0;

    return window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) {
        var timeCurrent = (new Date()).getTime(),
            timeDelta;

        /* Dynamically set delay on a per-tick basis to match 60fps. */
        /* Technique by Erik Moller. MIT license: https://gist.github.com/paulirish/1579671 */
        timeDelta = Math.max(0, 16 - (timeCurrent - timeLast));
        timeLast = timeCurrent + timeDelta;

        return setTimeout(function() { callback(timeCurrent + timeDelta); }, timeDelta);
    };
})();

Would it make sense to incorporate the same technique in velocity-react? Sadly, for our current project we still need to support IE 9 (for the time being).

Pass down props from VelocityTransitionGroupChild to actual child

Hi,
I'm using VelocityTransitionGroup with a custom component that applies props to its children. The props are being applied to the VelocityTransitionGroupChild correctly, but the actual child doesn't receive the props because VelocityTransitionGroupChild is not passing down unused props to its children. Is there a deeper reason why you are not passing props down to actual children?

Animation did complete hook

Is it possible to get a callback when the animation has completed?

By the way I love this library! Already this has saved me hours.

VelocityTransitionGroup sets style display: block to <tr>

Hi
I'm using VelocityTransitionGroup with table

<table>
    <thead>
        <tr>
            <th>something</th>
        </tr>
    </thead>
    <VelocityTransitionGroup component='tbody' enter='slideDown' leave='slideUp'>          
      {history.map(this.renderRows}}
    </VelocityTransitionGroup>
</table>

In developer tools I see td's have style="display: block;" and my table looks wrong.

I've tried pass display='table-row' to the component, but this doesn't help.
How can I fix this?

First argument error

I'm getting this error when I try to use VelocityComponent

Velocity: First argument (transition.slideLeftIn) was not a property map, a known action, or a registered redirect

Any ideas?

Enter style not applied

I've got this setup:

<VelocityTransitionGroup
  enter={{
    animation: {
      translateX: 0
    },
    style: {
      transform: 'translateX(-' + this.props.width + 'px)'
    }
  }}

  leave={{
    animation: {
      translateX: this.props.width + 'px'
    },
    style: {
      transform: 'translateX(0)'
    }
  }}

  runOnMount>
  {this.props.visible ? (
    <Wrapper>
      <img src={this.props.src} />
      { this.props.children }
    </Wrapper>
  ) : undefined }
</VelocityTransitionGroup>

Imagine multiple of those components next to each other. On enter, the Wrapper should slide in from the left, and the leaving Wrapper should slide out to the right.

The leave animation is working fine, but the style of the enter animation isn't applied before the animation starts, so it slides in from the right. Anybody know how to fix this?

Loop UIpack animation

Hi I'm using the UIPack stuff to sequence a couple calls

let translateAnimations = {
      withSwipe: velocityHelpers.registerEffect({
        defaultDuration: 750, 
        calls: 
         [
           [{translateX: buttonPosition.left, translateY: buttonPosition.top}],
           [{translateX: buttonPosition.left, translateY: '180px'}]
         ]
      })
    }

   ...
            <VelocityComponent animation={translateAnimations.withSwipe} loop={true} delay={100}>
                  <button className="touch" onClick={this.playNext.bind(this)} />
            </VelocityComponent>

Ideally I want button to move up and down the y-axis... It does reset and run again on component receiving props, but it doesn't appear to loop. Am I doing something wrong?

Online Demo please?

Looks interesting -- would an online demo be possible? Would like to add to react.rocks, thanks

Animation not firing properly

I'm probably using this wrong, but I'm trying to make an overly fade when a variable (post) is defined.

    return <div>
      {post ?
        <VelocityComponent animation={{opacity: post ? 1 : 0}} duration={300} runOnMount>
          <div style={{
            background: 'white',
            position: 'fixed',
            top: 0, right: 0, bottom: 0, left: 0, zIndex: 2000
          }}></div>
        </VelocityComponent> : ''
      }
    </div>

How can I achieve the effect I want? I obviously can't render the <VelocityComponent> and its children unless post is defined, otherwise there will be a transparent overlay blocking user interaction.

React 15 - remove peerDependencies

Hey, would you mind removing peerDependencies so we can choose the appropriate react version ourselves? Many libraries turned their backs to peerDependencies now.

Animating a Show More option for a list

I have a list component that shows 3 records to start, and when a user presses the Show More button the list is re-rendered with 6 records. I'm trying to animate between those two states, I thought I would be able to do something like this:

   render() {
        console.log("OrdersListWrapper.render() ")

        let recordsToShow = 3;
        if (this.state.expanded) {
            recordsToShow = 6;
        }

        // Get tasks from this.data.tasks
        return (

            <div>
                <VelocityTransitionGroup component="div"
                                         enter={{animation: 'slideIn', duration: this.state.duration, style: {height: ''}}}
                                         leave={{animation: 'slideOut', duration: this.state.duration}}
                >
                        <div><OrdersList recordsToShow={recordsToShow}/></div>
                </VelocityTransitionGroup>
                {this.renderDeviceToggle()}
            </div>
        );
    }

But the animation does not work, it just jumps from showing 3 to 6 rows with no animation. I don't understand why that's the case?

I can get it to work if I do the following:

        return (

            <div>
                <VelocityTransitionGroup component="div"
                                         enter={{animation: 'slideIn', duration: this.state.duration, style: {height: ''}}}
                                         leave={{animation: 'slideOut', duration: this.state.duration}}
                >
                    {this.state.expanded ? undefined : <div><OrdersList recordsToShow={recordsToShow}/></div> }
                    {this.state.expanded ? <div><OrdersList recordsToShow={recordsToShow}/></div> : undefined }
                </VelocityTransitionGroup>
                {this.renderDeviceToggle()}
            </div>
        );

But the problem with that is that I am now rendering the OrdersList component twice, and that means it is hitting the database twice which I'd like to avoid.

Can anyone help me understand what I need to do?

on item leave it's jumping to the end of the list and not holding position

VelocityTransitionGroup:
on item leave, animation starts and item is moved to the bottom of the list.
It's not holding position in the middle of the list until animation is complete.

here is the example of correct custom made behaviour and animation http://codepen.io/makenosound/pen/rstvx
item is staying in the middle of the list till the end of the animation

finishAll uncaught error

Hi, I am getting this error using velocity 1.2.3,
Uncaught (in promise) Error: Velocity: First argument (finishAll) was not a property map, a known action, or a registered redirect. Aborting.(…).
Any ideas?
Thanks Chris

scrollTop

How can I use the scrollTop with velocity-react like described here: http://julian.com/research/velocity/#scroll ?

Any hints?

demo didn't work

hi, i'm new to npm and node, seemed to need web pack server, so i installed
seems to build everything and then stops at without anything showing up in browser
bundle is now VALID. thanks. I should mention that this is on cloud9 ide, which is ubuntu 14.04

React 0.14 "refs must have owner" error

Guys, hello!

I am having some trouble, maybe because I don't get yet what Uncaught Error: Invariant Violation: addComponentAsRefTo(...) is, but here's whats happening:

I added the following code to help me with my pages transition

The key is related to the current page, so when the page changes, it renders a component with another key, creating the transition.

When updated to React 0.14 that code gives me

Works using any other parent

So I think it is not related to the {[ child ]} I created, right?

I also checked the <VelocityTransitionGroup /> but I cant find any refs being used.

Thanks!!

Requiring UI Pack with Webpack

Is there any specific reason the Velocity UI pack isn't required by default? What is best practice for adding this to a webpack project? Importing it globally doesn't help as the package pulls directly from 'velocity-animate', not the global Velocity object I create within my project.

Currently I'm aliasing 'velocity-animate' to a internal module and adding the UI pack manually but this seems messy.

Thanks, this project looks awesome.

velocity-animate not available as documented

if I put the following code from the docs into my app:

require('velocity-animate');
require('velocity-animate/velocity.ui');

I run into errors. I think this is because velocity-animate is installed in the node_models for velocity-react, but isn't available to my main app. I can fix it with the following code, but this seems like a hack:

require('velocity-react/node_modules/velocity-animate');
require('velocity-react/node_modules/velocity-animate/velocity.ui');

Support for React 0.14

When attempting to install I'm getting a peer-requirements error since its looking for React 0.13

VelocityTransitionGroup does not work with radium

Radium https://github.com/FormidableLabs/radium

If I add Radium decorator on the component -> then -> velocity transitions don't happen anymore. Probably because both libraries work off of style property.

This issue is mostly for tracking / search-ability of surprise moment for new users 🌹 Refs FormidableLabs/radium#394

RegisterEffect reset property support

Does velocity-react support the reset property for Velocity.RegisterEffect?

Specifically, I'm attempting to "clean up" the style attribute of a component after the animation is complete.

// Define prep styles for animation
var prepStyles = {
  bottom: 0,
  left: 0,
  position: 'absolute',
  right: 0,
  top: 0
}

var resetStyles = {
  bottom: 'auto',
  left: 'auto',
  position: 'static',
  right: 'auto',
  top: 'auto',
}

// Register effects
var scaleFadeIn = velocityHelpers.registerEffect({
  defaultDuration: 600,
  calls: [
    [{
      opacity: [1, 0],
      scale: [1, [500, 30], 0.5]
    }]
  ],
  reset: resetStyles
})

var scaleFadeOut = velocityHelpers.registerEffect({
  defaultDuration: 600,
  calls: [
    [{
      opacity: [0, 1],
      scale: [0.5, [500, 30], 1]
    }]
  ],
  reset: resetStyles
})

// Use animation with style hash
<VelocityTransitionGroup
  enter={{ animation: scaleFadeIn, style: prepStyles }}
  leave={{ animation: scaleFadeOut, style: prepStyles }}>
  {this.state.first ? <First /> : undefined}
  {!this.state.first ? <Second /> : undefined}
</VelocityTransitionGroup>

Leave animation not triggering in VelocityTransitionGroup

Using VelocityTransitionGroup, I am having an issue getting the leave animation to play, and have gotten into the weeds with both react-router and with velocity-react, but can not figure out the origin of the problem.

Here is the sample site: http://bird-683.getforge.io/#/setup/index?_k=9wdmqy

If you click through the demo (the demo is of a mobile app) - you will notice that the leave animations do not play. If you pull up the console, you'll also notice that I've added logging for both the leave and enter events in the VelocityTransitionGroupChild - both of which appear to fire correctly. This is what leads me to believe I may be encountering odd behavior in velocity-react itself, since the events appear to be firing correctly from the original ReactTransitionGroup.

I'm using VelocityTransitionGroup in the following way:

class Setup extends React.Component {
  static get contextTypes() {
    return {router: React.PropTypes.object.isRequired}
  }

  componentDidMount() {
    this.context.router.push('/setup/index');
  }

  render() {
    const { pathname } = this.props.location;
    console.log("pathname =", pathname);

    return (
      <div className="setup">
        <div className="intro-logo" />
        <VelocityTransitionGroup
          component="div"
          enter={{animation: "transition.slideRightBigIn"}}
          leave={{animation: "transition.slideLeftBigOut"}}>
          {React.cloneElement(this.props.children || <div/>, {key: pathname})}
        </VelocityTransitionGroup>
      </div>
    )
  }
}

I am using the most recent versions of react, velocity-react, and react-router.

Update lodash version

Since version 4.x methods have moved up one level.
I'm getting a Cannot find module "lodash/lang/isEqual".
In lodash 4.x this method is at "lodash/isEqual".

Ability to pass in a hash of start properties before animation

It would be nice to be able to declaratively say what should happen as opposed to setting a style, and then wrapping the component around it, and then having velocity compute from there.

What I'm thinking is something along the lines of TweenMax's fromTo method:

TweenMax.fromTo({ top: 100, opacity: 0}, { 
    top: 0, 
    opacity: 1
}) 

This method immediately sets the properties on a component before it is animated, and then animates from there. Right now I don't see a way to achieve this, unless this requires TransitionGroup (which seems a bit much for a fire and forget sort of thing).

setting `display: none` on first tick can cause issues for children

Setting display: none here:

https://github.com/twitter-fabric/velocity-react/blob/master/velocity-transition-group.js#L153

has the potential to cause issues with any components that happen to be under a VelocityTransitionGroup that run style based code as part of ComponentDidMount. For example we have list items that check their width and size the text inside accordingly. If these list items are a child of a parent that uses VelocityTransitionGroup to animate in they will come in at their minimum size as they are getting a width of 0. Then the next time they render they will size themselves correctly.

Velocity.js does not work in Node environments

One of the key reasons to use React in a project is for the server-side rendering, however Velocity expects window to be defined which it is not in a Node environment. There's a Velocity issue open concerning this but there has been no fix so far, and I don't think there ever will be. There are various suggested solutions but they're quite inelegant, and it would be nice if the library itself provided a fix of some sort.

I think velocity-react should have a shim that only loads Velocity when in a browser environment. I'm not sure how simple it would be, but pre-calculating the final transition states on the server would be a bonus. Failing that, could a VelocityComponent (et al) set the transition state on initial render?

VelocityTransitionGroup to manage page transitions with react-router

Hi,
Could you publish an example of how to use VelocityTransitionGroup to manage page transitions with react-router both v1.0.0 syntax and the older react-router syntax?

Many thanks,

The hooks are behaving abnormally

Below is a simple render function to illustrate the point:

render () {
  const transition = {
    enter: {
      animation: {
        opacity: 1,
      },
      duration: 400,
      begin() {
        console.log('[Enter] begin');
      },
    },
    leave: {
      animation: {
        opacity: 0,
      },
      duration: 400,
      begin() {
        console.log('[Leave] begin');
      },
    }
  };

  return (
    <VelocityTransitionGroup {...transition}>
      {'Children Here'}
    <VelocityTransitionGroup />
  );
}

I noticed that when the children are added, the console prints:

[Leave] begin
[Enter] begin

I think this is a bug. Or is there a reason for this behavior?
Thanks!!

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `Main`.

So I got that error while trying things out, Ill just copy pasta my code here, I'm confused as to why this is failing.

import React, { Component } from 'react'
import { Link } from 'react-router'
import Radium from 'radium'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import History from '../../logic/helpers/History'
import VelocityTransitionGroup from 'velocity-react'
import 'velocity-animate'

let styles = {
    header: {
        display: 'flex',
        flexFlow: 'row',
        justifyContent: 'space-around'
    }
}

// @Radium
export default class Main extends Component {
    render() {
        const { pathname } = this.props.location
        let Child = this.props.children
    // Only take the first-level part of the path as key, instead of the whole path.
    const key = pathname.split('/')[1] || 'root'
        return (
            <div>
                <div style={{
        display: 'flex',
        flexFlow: 'row',
        justifyContent: 'space-around'
    }}>
                    <Link to='scooby'><h1>Scooby</h1></Link>
                    <Link to='doo'><h1>Do</h1></Link>
                </div>
                <VelocityTransitionGroup animation={{ opacity: true ? 1 : 0 }} duration={500}>
                    {React.cloneElement(this.props.children, { key })}
            </VelocityTransitionGroup>
            </div>
        )
    }
}

I did try replacing {React.cloneElement(this.props.children, { key })} with <div>hi</div> so I don't think that is the problem, I used React Css Transition Group earlier with almost the same thing {React.cloneElement(this.props.children, { key })} and it worked but I do want to use velocity :).

Here is my package.json dependencies

"devDependencies": {
    "babel": "^5.5.8",
    "babel-core": "^5.8.25",
    "babel-eslint": "^4.1.3",
    "babel-loader": "^5.3.2",
    "babel-plugin-react-transform": "^1.1.1",
    "body-parser": "^1.14.1",
    "chai": "^3.4.0",
    "eslint": "^1.2.1",
    "eslint-plugin-react": "^3.6.3",
    "express": "^4.13.3",
    "express-jwt": "^3.1.0",
    "chai-immutable": "^1.4.0",
    "expect": "^1.12.2",
    "growl": "^1.8.1",
    "isparta": "^3.1.0",
    "mocha": "^2.2.5",
    "ncp": "^2.0.0",
    "react-transform-catch-errors": "^1.0.0",
    "react-transform-hmr": "^1.0.1",
    "redbox-react": "^1.1.1",
    "redux-devtools": "^2.1.5",
    "rimraf": "^2.3.4",
    "webpack-dev-middleware": "^1.2.0",
    "webpack-hot-middleware": "^2.4.1",
    "webpack": "^1.9.6"
  },
  "dependencies": {
    "history": "^1.13.0",
    "immutable": "^3.7.5",
    "material-ui": "^0.13.1",
    "radium": "^0.14.3",
    "react": "=0.14.1",
    "react-addons-create-fragment": "^0.14.1",
    "react-addons-css-transition-group": "^0.14.1",
    "react-addons-pure-render-mixin": "^0.14.1",
    "react-addons-transition-group": "^0.14.0",
    "react-addons-update": "^0.14.1",
    "react-dom": "^0.14.1",
    "react-router": "^1.0.0-rc3",
    "react-tap-event-plugin": "^0.2.1",
    "velocity-animate": "^1.2.3",
    "velocity-react": "^1.1.1"
  }

Begin & Complete callbacks firing for both enter and leave.

Example:

<VelocityTransitionGroup
 enter={{animation: "slideDown", duration: 250}}
 leave={{
   animation: "slideUp",
   begin: (element) => {
     console.log(element);
   },
   duration: 250
 }}
>

The begin callback on the leave animation will fire when the enter animation triggers as well, not just when the leave animation is triggered.

npm peer dependency mismatch

On npm, version 1.1.1 has a peer dependency of of react 0.14.2 but master is still on 0.14.0. Looks like the peer deps were changed and published to npm but not here?

chaining with react components

Hey Folks, this looks interesting, nice work!

How would you recommend chaining velocity animations across components (sync or async)? For example,
1 Component on left side of page, 2 Components stacked on right side:

Comp1	Comp2
	Comp3

pseudo...

<div id=left>
  <Comp1 />
</div>
<div id=right>
  <Comp2 />
  <Comp3 />
</div>

I would like to fadeIn/Out Comp1 on a button click. When fading I would also like to fade or slide the right side to full width, sorta like your typical slideout menu effect.

I also want to fadeIn/Out Comp2 on a button click, and nicely slide or fade Comp3 in its place.

So far using bootstrap grid classes for spacing, but the collapsing effects are still too sudden.
For example, I fadeOut Comp1, and apply the class col-md-12 to Comp2 and Comp3. But the class is applied by state change outside of the VelocityComponent, so the right side drops below the left side until the animation is done. Icky. Was thinking fade both sides out, then fade right side back in.

pseudo...

<VelocityComponent>
  <div id=left>
    <Comp1 />
  </div>
<VelocityComponent />
<VelocityComponent>
  <div id=right>
    <VelocityComponent>
      <Comp2 />
    <VelocityComponent />
    <VelocityComponent>
      <Comp3 />
    <VelocityComponent />
 </div>
<VelocityComponent />

The Velocity docs show chaining but for jquery methods, not React. And the TransitionGroup example seems to show animation sequences applied to one component only, not across sibling components...based on my noob understanding.

Thoughts?

Cheers,
:Larry

css-loader dependency missing from package.json

Went to PR but I don't think I have branch push rights. The demos look amazing.

issues getting measurements on element within VelocityTransitionGroup

I'm using a VelocityTransitionGroup for a Loading element that shows a spinner while it has no children and then fades the spinner out and fades the children in when they exist. The issue I'm running into is if I try and get the offsetWidth of a ref within the new children on componentDidMount I end up getting a value of 0. If I remove VelocityTransitionGroup I get the correct width value on this element.

Here is my Loading component for reference. the console log statement in componentDidUpdate returns a correct width pre and post loading without VelocityTransitionGroup but returns an incorrect value after loading otherwise:

https://gist.github.com/chrisdrackett/2dcbaea51b59166bf5db

Module not found error

Hi!

I've downloaded this repo and ran the commands specified in Readme but getting the error below which prevents me from running this locally.

What could be the problem?

How to scroll based on property of wrapped component

I'm trying to reason my way around getting an element to 'scroll' when a property changes. I have this.props.active, and when this changes to true, the element should scroll.

I had anticipated doing something like:

componentDidUpdate() {
  if (this.props.active) { 
    ReactDOM.findDOMNode(this).velocity('scroll', {duration: 500, offset: '54px'});
    // This works --> ReactDOM.findDOMNode(this).scrollIntoView({behavior: 'smooth'});
  }
}

But I haven't managed to get velocity to work in that context (window is not defined).
scrollIntoView works, but we can do much better/nicer/better supported things with velocity.

Is there a way to solve this scenario using velocity-react?

Awful performance on mounting caused by the iframe

please delete it. wrong repo. sorry about that

velocityHelpers can't be used in a server-side render environment.

The original velocity-animate package expects to be client-side, so requiring it, in order to enable the velocityHelpers, isn't possible when you are rendering on the server.

How would you deal with this situation ?

Hello,

Having great success with the library so far.
However I got a new requirement causing me some grief to achieve.

I have 2 pages:

• a list of items (that you can sort and filter)
• a form to create new items

I have 2 API endpoints:

• one gets the original list of items
• one returns new items that have been added by other users

This is how it works:

1. when the list of items first load, items are rendered without animation
2. when you filter or sort the list, items are rendered without animation
3. when the second API notify new items have been added, those are rendered in the list with animation
4. when an item is deleted, it gets removed with an animation
5. when a user leave the list page to create an item on the second page, he is redirected back to the list page after creation, the new item only must be rendered with animation

At the moment I achieve 1 to 4 but I am having problems with 5 (5 leaves the list page then come back, unmount/mount items). If I turn on animation (on mount) all items are animated as no item was (React) mounted yet. If animation is turned off nothing gets animated including the new item.

For animation I wrap the list of items inside a VelocityTransitionGroup and each item has a key attribute set to the item unique id. The unique id works well to filter out what gets animated but in the case of 5 it doesn't help.

I have hacks in mind but they are not elegant. What would be the best approach to meet requirements 1 to 5 ?

I am thinking replacing the transition group with a VelocityElement per row/item for finer control but I am not sure how to achieve the enter, leave effect as provided by the transition group. Also feels like reinventing transition group in a way.

doesn't work if jquery is loaded

Existing way of passing arguments to velocity does not work if jQuery is also loaded. This is because of the way velocity assumes argument order, when jQuery exists (regardless of the load order of jQuery - before Velocity or after Velocity) --

        /* Detect jQuery/Zepto elements being animated via the $.fn method. */
        if (Type.isWrapped(this)) {
            isUtility = false;

            argumentIndex = 0;
            elements = this;
            elementsWrapped = this;
        /* Otherwise, raw elements are being animated via the utility function. */
        } else {
            isUtility = true;

            argumentIndex = 1;
            elements = syntacticSugar ? (arguments[0].elements || arguments[0].e) : arguments[0];
        }

Promise is not defined

Is it just me? :)

Following your steps:

$ git clone https://github.com/twitter-fabric/velocity-react.git
$ cd velocity-react
$ npm install
$ npm run demo

Gives me the following errors:

ERROR in ./~/css-loader!./demo/css/flexbox.css
Module build failed: ReferenceError: Promise is not defined
    at LazyResult.async (/Users/superman/velocity-react/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:152:31)
    at LazyResult.then (/Users/superman/velocity-react/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:75:21)
    at processCss (/Users/superman/velocity-react/node_modules/css-loader/lib/processCss.js:174:5)
    at Object.module.exports (/Users/superman/velocity-react/node_modules/css-loader/lib/loader.js:22:2)
 @ ./demo/css/flexbox.css 4:14-81 13:2-17:4 14:20-87

ERROR in ./~/css-loader!./demo/css/loading-placeholder.css
Module build failed: ReferenceError: Promise is not defined
    at LazyResult.async (/Users/superman/velocity-react/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:152:31)
    at LazyResult.then (/Users/superman/velocity-react/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:75:21)
    at processCss (/Users/superman/velocity-react/node_modules/css-loader/lib/processCss.js:174:5)
    at Object.module.exports (/Users/superman/velocity-react/node_modules/css-loader/lib/loader.js:22:2)
 @ ./demo/css/loading-placeholder.css 4:14-93 13:2-17:4 14:20-99

ERROR in ./~/css-loader!./demo/css/polyfill.css
Module build failed: ReferenceError: Promise is not defined
    at LazyResult.async (/Users/superman/velocity-react/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:152:31)
    at LazyResult.then (/Users/superman/velocity-react/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:75:21)
    at processCss (/Users/superman/velocity-react/node_modules/css-loader/lib/processCss.js:174:5)
    at Object.module.exports (/Users/superman/velocity-react/node_modules/css-loader/lib/loader.js:22:2)
 @ ./demo/css/polyfill.css 4:14-82 13:2-17:4 14:20-88

Uncaught Velocity.RegisterEffect not found. however I do require('velocity-animate/velocity.ui').

I am getting

Uncaught Velocity.RegisterEffect not found.
You need to require('velocity-animate/velocity.ui') at a top level for UI Pack.

However I do require Velocity UI in my top level component.

import 'babel-core/polyfill';
import 'velocity-animate';
import 'velocity-animate/velocity.ui';
import ReactDOM from 'react-dom';

Velocity is on the window, but Velocity.RegisterEffect is not.

is the effect 'shrink' and 'expand' of the first demo "Property Change" correct?

should the effect 'shrink' and 'expand' in the first demo correct?

Problems with VelocityTransitionGroup on react-templates

Hi,

I get the next error to use VelocityTransistionGroup in a react-template

Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component'srendermethod, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

This is the code of the template:

<rt-require dependency="react-bootstrap/lib/Grid" as="Grid" />
<rt-require dependency="react-bootstrap/lib/Row" as="Row" />
<rt-require dependency="react-bootstrap/lib/ListGroup" as="ListGroup"/>
<rt-require dependency="react-bootstrap/lib/ListGroupItem" as="ListGroupItem"/>
<rt-require dependency="react-loader" as="Loader" />
<rt-require dependency="velocity-react/velocity-transition-group" as="VelocityTransitionGroup" />

<VelocityTransitionGroup component="div" enter="transition.fadeIn" leave="transition.fadeOut" duration={200}>
    <Grid>
        <Row>
                <Loader loaded="{this.state.loaded}" color='#bf5a16' top="50%" left="50%" scale={1.00} width={10}>
                    <ListGroup>
                        <ListGroupItem rt-repeat="conversation in this.state.conversations" key='{conversationIndex}' header="{conversation.title}">Tiene {conversation.messages ? conversation.messages.length : 0 } mensajes </ListGroupItem>
                    </ListGroup>
                </Loader>
        </Row>
   </Grid>
</ VelocityTransitionGroup>

In this way I have the render method:

import Template from './Conversations.rt.js'
render(){
        return Template.call(this);
 }

Thanks and greetings