An easy way to perform animations when a React component enters or leaves the DOM

Overview

react-transition-group npm

ATTENTION! To address many issues that have come up over the years, the API in v2 and above is not backwards compatible with the original React addon (v1-stable).

For a drop-in replacement for react-addons-transition-group and react-addons-css-transition-group, use the v1 release. Documentation and code for that release are available on the v1-stable branch.

We are no longer updating the v1 codebase, please upgrade to the latest version when possible

A set of components for managing component states (including mounting and unmounting) over time, specifically designed with animation in mind.

Documentation

TypeScript

TypeScript definitions are published via DefinitelyTyped and can be installed via the following command:

npm install @types/react-transition-group

Examples

Clone the repo first:

[email protected]:reactjs/react-transition-group.git

Then run npm install (or yarn), and finally npm run storybook to start a storybook instance that you can navigate to in your browser to see the examples.

Comments
  • feat: add `nodeRef` alternative instead of internal `findDOMNode`

    feat: add `nodeRef` alternative instead of internal `findDOMNode`

    RFC: An alternative to ReactDOM.findDOMNode

    • [x] Add nodeRef alternative for internal findDOMNode
    • [x] Adapted tests
    • [x] Added Tests
    • [x] Adapted stories

    We can name prop one of this:

    • domRef
    • nodeRef
    • guestRef
    • transitionRef
    • ref (with forwardRef but BREAKING CHANGE)

    PRs:

    Closes #457 Closes #486 Closes #514

    Issues:

    Closes #287 Closes #429

    released 
    opened by iamandrewluca 61
  • Added es build, which will get beneficial for es2015 modules aware bu…

    Added es build, which will get beneficial for es2015 modules aware bu…

    …ndlers like webpack 2+ and rollup

    IMHO this should also be cherry-picked to the v1 branch.

    This will allow webpack3 to use scope hoisting on this package + ofc tree-shaking will become possible.

    opened by Andarist 60
  • "appear" doesn't work for "CSSTransition"

    Do you want to request a feature or report a bug? bug

    What is the current behavior? appear={true} doesn't work for "CSSTransition"

    If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/m4mb9Lg3/4/).

    JSX:

    import React, {Component} from 'react';
    import {Link} from 'react-router-dom';
    import './StepOne.css';
    import CSSTransition from 'react-transition-group/CSSTransition';
    
    export default class StepOne extends Component {
    
        render() {
            return (
                <CSSTransition
                   classNames="fade"
                   appear={true}
                   timeout={500}>
                    <div>
                        <Link to="/type">
                            to step two
                        </Link>
                        <h1>Step One</h1>
                    </div>
                </CSSTransition>
            );
        }
    
    }
    

    CSS:

    .fade-appear {
        opacity: 0.01;
    }
    
    .fade-appear.fade-appear-active {
        opacity: 1;
        transition: opacity 500ms ease-in;
    }
    
    

    What is the expected behavior? should fade in when refresh or first come to this page.

    Which versions, and which browser / OS are affected by this issue? Did this work in previous versions?

    I tried V1, it works. I just can't make it work after migrate it to v2. This occur on all browsers, I'm on Mac

    opened by SoooEZ 41
  • CSSTransition using findDOMNode which is deprecated in React 16.13.1

    CSSTransition using findDOMNode which is deprecated in React 16.13.1

    A warning regarding the deprecation of findDOMNode is shown when using the SwitchTransition & CSSTransition in Strict mode (React v16.13.1).

    What is the current behaviour?

    Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node

    What is the expected behavior?

    No console messages

    Could you provide a CodeSandbox demo reproducing the bug?

    Can be recreated using the demo sandbox and changing the React version to 16.13.1. Screenshot (7)

    opened by david-forster10 40
  • Delay before animation begins

    Delay before animation begins

    In the first example given in the documentation there is a noticeable delay between clicking the button and the animation starting. This delay seems to correspond to the duration of the timeout property. Clearly, one would desire the animation to begin straight away, normally, as well as being able to configure a delay in some cases. It's not so obvious in the example because the timeout isn't very large, but when you set it to a bigger number you begin to see the issue.

    In my own experiment I set start and end properties for the respective entering and exit states.

    const transitionStyles = {
      entering: { left: 0 },
      entered: { left: '100px' },
    };
    

    What then happens is that the start property is immediately set, but that then a delay occurs before the animation kicks in.

    I get the desired effect if I set the property to be the same in both states (and set the default to 0), but this doesn't seem right.

    const defaultStyles = {
      left: 0,
    }
    const transitionStyles = {
      entering: { left: '100px' },
      entered: { left: '100px' },
    };
    

    Here is the full code for the my experiment when there is an unwanted delay at the start of the animation:

    import ReactDOM from 'react-dom';
    import React from 'react';
    import { Transition } from 'react-transition-group';
    
    const duration = 1600;
    
    const defaultStyle = {
      transition: `left ${duration}ms linear`,
      position: 'absolute',
      top: 200,
      width: '100px',
      height: '100px',
    }
    
    const transitionStyles = {
      entering: { left: '0' },
      entered:  { left: '400px'},
    };
    
    class Foo extends React.Component {
      constructor () {
        super();
        this.state = {
          in: false,
          duration
        };
        this.onClick = this.onClick.bind(this);
        this.onClickOff = this.onClickOff.bind(this);
      }
    
      onClick() {
        this.setState({
          in: true,
        });
      }
    
      onClickOff() {
        this.setState({
          in: false,
        });
      }
    
      render() {
       return (
         <div>
           <button onClick={this.onClick}>clickOn</button>
           <button onClick={this.onClickOff}>clickOff</button>
           <Transition
            onEntering={() => { console.log('on entering')}}
            onEntered={() => { console.log('on entered')}}
           in={this.state.in}
           timeout={this.state.duration}>
           {(state) => (
             <div style={{
               background: 'blue',
                 ...defaultStyle,
                 ...transitionStyles[state]
             }}>
             <div>
             <h2>This is Bar</h2>
             </div>
             </div>
           )}
           </Transition>
         </div>
       );
      }
    }
    
    ReactDOM.render(
      <Foo/>, document.getElementById('app')
    );
    
    
    opened by Richardinho 36
  • Is componentDidMount expected to be called twice?

    Is componentDidMount expected to be called twice?

    Using version 1.2 in Chrome I can see that componentDidMount is getting called twice.

    I am doing an Ajax call in the componentDidMount of my component, so this is not ideal. Is this the expected behaviour?

    Example:

     <CSSTransitionGroup className='my-container'
                                transitionEnterTimeout={500}
                                transitionLeave={false}
                                transitionName='example'
                                component='div'
                            >
                            <MyComponent location={location} key={getKey(location.pathname)}>
    

    getKey gets a basic, but unique key from React Router

    opened by ghost 36
  • RFC: An alternative to ReactDOM.findDOMNode

    RFC: An alternative to ReactDOM.findDOMNode

    Hi everyone 👋

    The time has come to implement an alternative to ReactDOM.findDOMNode, as explained in React docs:

    findDOMNode is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because it pierces the component abstraction. It has been deprecated in StrictMode.

    The goal is to come up with an API that is optional and falls back to ReactDOM.findDOMNode. I think that we should eventually change the entire API into something more sustainable, probably hooks, but that's a separate discussion.

    So far we have three proposed solutions:

    1. findDOMNode, a function that returns a node (#457)

    @eps1lon's solution would look like this:

    import React from 'react'
    import { Transition } from 'react-transition-group'
    
    const StrictModeTransition = () => {
      const childRef = React.useRef(null)
    
      return (
        <Transition appear in findDOMNode={() => childRef.current}>
          <div ref={childRef}>
            transition
          </div>
        </Transition>
      )
    }
    

    2. domRef, a ref object (#559)

    @iamandrewluca's solution would look like this:

    import React from 'react'
    import { Transition } from 'react-transition-group'
    
    const StrictModeTransition = () => {
      const childRef = React.useRef(null)
    
      return (
        <Transition appear in domRef={childRef}>
          <div ref={childRef}>
            transition
          </div>
        </Transition>
      )
    }
    

    3. ref object as a 2nd argument in render prop

    My solution would look like this:

    import React from 'react'
    import { Transition } from 'react-transition-group'
    
    const StrictModeTransition = () => {
      return (
        <Transition appear in>
          {(status, childRef) => (
            <div ref={childRef}>
              transition
            </div>
          )}
        </Transition>
      )
    }
    

    So let's begin!

    Updates

    For those who are just catching up with the discussion, one notable proposition is to extend the 3rd solution with the ability to pass your own ref, which would then be forwarded to the render prop:

    import React from 'react'
    import { Transition } from 'react-transition-group'
    
    const StrictModeTransition = () => {
      const childRef = React.useRef(null)
      return (
        <Transition appear in ref={childRef}>
          {(status, innerRef) => (
            // innerRef === childRef
            <div ref={innerRef}>
              {status}
            </div>
          )}
        </Transition>
      )
    }
    

    This way we can avoid having to merge refs, which is the key benefit of the 2nd solution. (If you don't pass a ref to Transition, it would create one internally.)

    opened by silvenon 34
  • Example of usage with React Router 4 for page transitions

    Example of usage with React Router 4 for page transitions

    The inspiration is from this post - medium post.

    tl;dr

    Here is the result with React Router 4, CSSTransition and css classes - codesandbox. In order to change page transition you need to replace css properties. No external libraries are needed.


    Initial issue:

    Here is the result webpage from the article. It is working this way:

    • there are two components in page transition: new (animated on mount) and old (animated on unmount)
    • to make a fade in-out element transaction, the old element has to be under the new element, which can be done with css position: fixed/absolute. So, both elements render in the same spot.
    • when a new element enters, it has to wait 250ms and then fade in. When the old element is unmounting, fade-out animation with duration of 175ms is triggered and then element is removed from dom. The difference between 175ms and 250ms makes a nice transition effect.

    Since in v2 the API was changed, I'm trying to create similar transition effect. I do think this example will be helpful for other devs and I would like some help to make it work.

    1. Here is basic setup - https://codesandbox.io/s/W7R5BKzzX. As you can see, the new element is rendered on top of old ones. Next step, we need to make a transition.
    • there is a bug, when the unmounted component is changed because Switch renders another component on location change [Solved]
    1. Here is an example with fixed position - https://codesandbox.io/s/pYOyyMxPQ. Both, the new and the old elements are rendered in the same spot. Next step is to fade out the old element with 175ms duration and fade in the new element after delay of 250ms.

    This is where I've come so far. Ideas and advices would be great - cc @jquense @Horizon-Blue

    Update 1:

    Switch component is rendering the wrong component on exit because the current location is changed while the element is not removed from DOM yet. The solution is to pass location prop into Switch in order to render the correct component during the whole lifecycle.

    Update 2

    With CSSTransition and css classes it is relatively easy to create page transition once you understand the way it works. Here is the result - codesandbox.

    For my project, this is good enough although it'll be interesting to see transition with external library (GSAP, animejs or another one).

    Update 3

    Found another bug with history package in RR4. Clicking the same link creates duplicates in location history and navigating back is broken if location.pathname is used as a key (which was supposed to remove nested route animation). history issue, current workaround

    opened by vladshcherbin 30
  • StrictMode warning for findDOMNode and legacy context API in Transition as of React 16.6

    StrictMode warning for findDOMNode and legacy context API in Transition as of React 16.6

    Do you want to request a feature or report a bug? Report a bug

    What is the current behavior? When using <Transition /> inside of <React.StrictMode />, warnings are logged about findDOMNode and the legacy context API (as of React 16.6)

    If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via CodeSandbox. View the console at https://codesandbox.io/s/y0r3kl6x1j. On mount, you'll see:

    Warning: Legacy context API has been detected within a strict-mode tree
    

    and after clicking "Toggle in Prop", you'll see:

    findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference.
    

    What is the expected behavior? No warning should be logged.

    Which versions, and which browser / OS are affected by this issue? Did this work in previous versions? These warnings are new as of React 16.6.

    released 
    opened by TAGraves 25
  • fix: appearing animation with Transition

    fix: appearing animation with Transition

    This fixes #538. Currently, changing appearing status is synchronously on cDM, so transitions never been applied. The following is a minimum case for that.

    https://codepen.io/koba04/pen/JjPKmMw

    So I've added a reflow before the transition as well as CSSTransition.

    opened by koba04 24
  • how to use it with react router 4?

    how to use it with react router 4?

    Hi, how to use it with react router 4?

    <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnter={true} transitionEnterTimeout={500} transitionLeave={true} transitionLeaveTimeout={500}>

    { React.cloneElement(this.props.children, { key: this.props.location.pathname })}

    Doesn't work

    opened by atwaves 21
  • During the animation, the '-enter' and '-exit' class names were not removed

    During the animation, the '-enter' and '-exit' class names were not removed

    What is the current behavior?

    When entering animation

    <div  class="*-enter *-enter-active"></div>
    

    When leaving animation

     <div  class="*-exit *-exit-active"></div>
    

    The order of css class names is reversed, resulting in invalid animation

    What is the expected behavior?

    When entering animation

       <div  class="*-enter-active"></div>
    

    When leaving animation

       <div  class="*-exit-active"></div>
    
    opened by wyf1992 0
  • React transition group still works without adding refs

    React transition group still works without adding refs

    What is the current behavior? I am trying to use react transition group with css transition, and not sure what is the point of creating and adding refs, as it seems to work without refs.

    What is the expected behavior? It will not work without refs.

    Could you provide a CodeSandbox demo reproducing the bug? this is original one with refs. http://reactcommunity.org/react-transition-group/transition-group Below is the one I removed refs. It still works. https://codesandbox.io/s/priceless-lovelace-zku7cm I removed all the refs from the example in the website, and it still seems to work.

    Please let me know if refs are really needed to use transition group and css transition.

    opened by nfabacus 1
  • build(deps): bump loader-utils from 1.4.0 to 1.4.2

    build(deps): bump loader-utils from 1.4.0 to 1.4.2

    Bumps loader-utils from 1.4.0 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • build(deps): bump loader-utils from 1.4.0 to 1.4.2 in /www

    build(deps): bump loader-utils from 1.4.0 to 1.4.2 in /www

    Bumps loader-utils from 1.4.0 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • SwitchTransition infinite loop between exit and enter state

    SwitchTransition infinite loop between exit and enter state

    What is the current behavior?

    As soon as I insert a into a component, once it is activated, an infinite loop is created between classes named enter and exit. It jumps back and forth between the two classes without any intermediate stages.

    What is the expected behavior?

    No infinite loop between enter and exit

    Could you provide a CodeSandbox demo reproducing the bug?

    codesandbox with issue

    opened by floxrot 0
  • build(deps): bump socket.io-parser from 4.0.4 to 4.0.5 in /www

    build(deps): bump socket.io-parser from 4.0.4 to 4.0.5 in /www

    Bumps socket.io-parser from 4.0.4 to 4.0.5.

    Release notes

    Sourced from socket.io-parser's releases.

    4.0.5

    Bug Fixes

    • check the format of the index of each attachment (b559f05)

    Links

    Changelog

    Sourced from socket.io-parser's changelog.

    4.0.5 (2022-06-27)

    Bug Fixes

    • check the format of the index of each attachment (b559f05)

    4.2.0 (2022-04-17)

    Features

    • allow the usage of custom replacer and reviver (#112) (b08bc1a)

    4.1.2 (2022-02-17)

    Bug Fixes

    • allow objects with a null prototype in binary packets (#114) (7f6b262)

    4.1.1 (2021-10-14)

    4.1.0 (2021-10-11)

    Features

    • provide an ESM build with and without debug (388c616)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v4.4.5)
Owner
React Community
React website and its localizations
React Community
⚛ 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 249 Nov 16, 2022
Track the position of DOM elements. Create cool animations.

react-track Avoid it if you can, but for a certain class of (mostly animation-related) problems, you need to query the DOM. This library provides a wa

Gil Birman 340 Oct 6, 2022
A collection of animations that can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite

A collection of animations that can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite. React-animations implements all animations from animate.css.

CreativeModernDev 0 Aug 29, 2022
A React component for creating typing animations.

react-typewriter A react component for animated typing text. Installation npm install --save react-typewriter Usage Pass in children to the TypeWrite

Ian Dilling 80 Dec 1, 2022
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 7 Dec 12, 2021
React component to show or hide elements with animations

React-Animated-CSS React component to show or hide elements with animations using Animated.css Demo https://digital-flowers.github.io/react-animated-c

Fareed Alnamrouti 213 Nov 11, 2022
React component which helps you to easily apply responsive spritesheet animations on your project.

React Responsive Spritesheet Hello, world! React Responsive Spritesheet is a React component which helps you to easily apply responsive spritesheet an

Danilo Setra 84 Sep 15, 2022
React component for loading animations

react-loading Easy to use loading animations for React projects. Uses SVG animations from Brent Jackson's loading project. Installation npm i react-lo

Fakiolas Marios 772 Nov 24, 2022
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.9k Nov 27, 2022
Easiest way to add scroll parallax effect on the component

React Parallax Component Easiest way to add scroll parallax effect on the component. Installation npm install react-parallax-component Usage import Pa

Andrey 156 Nov 30, 2022
React components for the Web Animations API - http://react-web-animation.surge.sh

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

Charles King 294 Dec 2, 2022
A React library to work with lottie animations inside React.js

React Lottie Tools This React library helps to work with lottie animations inside React.js Info This library is an abstraction of the official lottie

Will 15 Sep 26, 2022
React App with games using animations (react-spring)

Teddy games https://pylnata.github.io/teddy/ React App with cartoon animations and games for kids. Developed just for fun and to learn React-spring li

Nataliia Pylypenko 153 Nov 25, 2022
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 354 Oct 27, 2022
🦸 Beautiful immersive React hero animations.

Motion Layout Create beautiful immersive React hero animations using shared components. Docs React Motion Layout Docs About Motivation There are amazi

Jefferson Licet 582 Nov 22, 2022
High-performance spring animations in React

React Rebound A spring-based React animation library that animates elements directly in the DOM for maximum performance. Hooks and component-based API

Stefano J. Attardi 132 Nov 11, 2022
Create frame-based animations in React

React Keyframes A React component for creating frame-based animations. Example The following example will render contents in Frame one at a time every

Vercel 607 Nov 19, 2022
✨ 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 Th

Nitin Tulswani 909 Oct 26, 2022
Compose React Animations using High-Order Functions or Components

React Motions Compose React Animations using High-Order Functions or Components React-Motions is a mix of ideas from Recompose and Animate.css. In fac

Raphael Amorim 87 Jul 18, 2022