nitin42 / animate-components

✨ Elemental components for doing animations in React

Looking for maintainers. Please reach out to me if you're interested!

Animate Components

Elemental components for doing animation in React

Packages

This repository uses Lerna to organise the codebase.

Package	Version	Description
animate-keyframes		Keyframes for animations
animate-components		Components for animations
element-utils		Utility functions for animate-components
ac-inferno		animate-components for InfernoJS

Docs

View the docs here

Support

Animate Components also supports InfernoJS (separate package so inferno-compat is not required) and Preact (with preact-compat).

Why a separate package for InfernoJS ? Read here.

animate-components's Issues

Disappear speed up animation?

I hope im just missing something but what's the best way to accelerate the animation in the disappear hoc?

"generate-components" dependency

It would be awesome to have generate-components installed with the animate-components module. Ran into a few hiccups just now and realized that module got updated a few hours ago.
Thanks in advance! 👍 😁

flow-typed definitions

Good first time contribution !!

Add flow-type declaration file to flow-typed central repository. Sample declaration file is created here.

No fadeOut animation?

I see there's a fadeIn, but no fadeOut?

Moving docs

Rendering docs on the website and add a link to edit it.

Yarn upgrade issue?

 ~/Sites/When-I-Work/wheniwork-js   feature/update-deps  yarn upgrade animate-components
yarn upgrade v0.24.5
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/animate-components/-/animate-components-1.1.4.tgz: Invalid tar header. Maybe the tar is corrupted or it needs to be gunzipped?".
info If you think this is a bug, please open a bug report with the information provided in "/Users/clarktomlinson/Sites/When-I-Work/wheniwork-js/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/upgrade for documentation about this command.

getting this when trying to upgrade, is this an issue on your end or theirs?

can't use npm install

Some issue with the npm package... the latest version I'm able to install from NPM is 0.8.2

"No compatible version found: [email protected]"

I've tried both NPM, and Yarn, and installing directly from github with npm install nitin42/animate-components

Flow errors

Unresolved Flow errors.

Inferno support?

Are there any plans of adding support for InfernoJS?
Would be a nice addition if possible 😄 ❤️

Add ability to change element type

By default you add a span but that causes issues with bootstrap v4 would be nice if we had the option to change it to say a div or something of the sorts...

Error compiling.

Following basic guidelines/examples given and yet it returns the following error:

./~/animate-components/build/index.js
Module not found: Can't resolve './animations/special' in '/Users/meadowcottage/Desktop/kaplansays/node_modules/animate-components/build'

This the my component code:

import { Component } from 'react';
import { Button } from 'antd';
import { FadeIn } from "animate-components";

import '../styles/main.css';

export default class App extends Component {
  render() {
    return (
      <FadeIn duration="2s" timingFunction="ease-out">
        <div className="App">
          <h1>Error: An error occured loading the page.</h1>
          <Button type="primary">Reload</Button>
        </div>
      </FadeIn>
    );
  }
}

Any support would be appreciated.

Typescript support

Is there any plans for Typescript support ?

Demo site does not seem to work

No errors, but blank page on https://nitin42.github.io/ac/

.render() IE Error

Hi, I happen to be hitting this error in IE11.
Any thoughts:

SlideRight.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Works great in Chrome.

Version Question

Per your releases page your latest version is 1.3.0 but npm shows latest at 1.4.5
https://www.npmjs.com/package/animate-components
https://github.com/nitin42/animate-components/releases

but version 1.4.5 (latest from npm) doesnt have the updated package.json that adds react and react-dom as peer deps

am i missing something?

move react and react-dom to peer dependancies

Title says it all

`<Merge />` component may not sync.

If you are using <Merge /> component then at some cases it may not sync two animations. But I'm pretty sure there won't be much problems. I am changing the update process though!

Animation trigger on component unmount

Hi, I have a feeling I'm missing something obvious, but I'm having trouble understanding how to animate an element when it unmounts. For example, I have a list view and when an item is marked off, I want to animate it away. All of the examples I see seem to fire immediately.

If you could point me a bit in the right direction, I'll gladly write up some more documentation and issue a PR for it to help others! Thanks!

build issue with react-attributes?

@nitin42

It appears im getting this with react-attributes which is published by you but i cant find a repo for it.

Unexpected token: name (shouldNotBeUndefined) [./~/react-attributes/index.js:3,0][assets/js/vendor-f4077c28349e66b94f3a.js:78808,4]

any ideas?

Add tests

Add more tests.

• Test componentWillReceiveProps using Enzyme's setProps(props) => self.
• Tests regarding the mods. (DOM nesting and element type rendering)
• More code coverage.

How to force animation

Hi, is it possibile to force animation when parent component receives props?
I tried forceInterpolate with no success.
Thanks in advance!

Add prop to disappear to allow custom disappear func

Disppear component is fantastic but it would be great if there was a way to call a function after the animation is complete.

I.e. i use this for a Notice and i need to trigger a redux action once it's closed to keep the store in sync.