React components for Velocity.js

Overview

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

Comments
  • Unknown prop warnings - React 15.2.0

    Unknown prop warnings - React 15.2.0

    Since React 15.2.0, warnings have been added when unknown/invalid props are passed to regular DOM elements. React-bootstrap and many other libraries have had to modify the way props are passed in their modules. Relevant discussion is contained in this issue: https://github.com/react-bootstrap/react-bootstrap/issues/1994

    velocity-react is having the same issues, as I'm receiving the following warnings:

    Warning: Unknown prop 'duration' on <span> tag. Remove this prop from the element.

    Thanks for the great module, it's been working a treat otherwise!

    opened by Moeface 15
  • Update lodash version

    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".

    opened by BLMaster 14
  • issues getting measurements on element within VelocityTransitionGroup

    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

    opened by chrisdrackett 12
  • Velocity.js does not work in Node environments

    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?

    opened by jamwaffles 10
  • Please provide Typings

    Please provide Typings

    I just gave this library a shot, primarily because I was:

    • looking for a simpler, more robust to CSSTransitionGroup
    • trying to do a slideUp and slideDown Effect on an auto-sized container (which CSS can't do)

    I am honestly amazed by this library, both the core velocity.js and the smooth react integration. It just fits!

    Many react users (including me) are quite fond of TypeScript, even react itself comes with all typings included. This library would be even more awesome if it had a velocity-react.d.ts file to help with code completion and error checking. My own knowledge of this library is too limited to have a holistic picture of all possible settings. Is there any chance you could provide the typings? I already checked the web for existing typings for this library, but there are none it seems...

    opened by MartinHaeusler 9
  • Missing lodash?

    Missing lodash?

    I just installed this library but receive the following errors when requireing the package.

    Imported like so import { VelocityComponent } from 'velocity-react';

    ERROR in ./~/velocity-react/velocity-helpers.js
    Module not found: Error: Cannot resolve module 'lodash/lang/isObject' in C:\xampp\htdocs\Wizer\tools\node_modules\velocity-react
     @ ./~/velocity-react/velocity-helpers.js 4:12-43
    
    ERROR in ./~/velocity-react/velocity-component.js
    Module not found: Error: Cannot resolve module 'lodash/collection/forEach' in C:\xampp\htdocs\Wizer\tools\node_modules\velocity-react
     @ ./~/velocity-react/velocity-component.js 37:11-47
    
    ERROR in ./~/velocity-react/velocity-transition-group.js
    Module not found: Error: Cannot resolve module 'lodash/collection/forEach' in C:\xampp\htdocs\Wizer\tools\node_modules\velocity-react
     @ ./~/velocity-react/velocity-transition-group.js 46:11-47
    
    ERROR in ./~/velocity-react/velocity-component.js
    Module not found: Error: Cannot resolve module 'lodash/lang/isEqual' in C:\xampp\htdocs\Wizer\tools\node_modules\velocity-react
     @ ./~/velocity-react/velocity-component.js 38:11-41
    
    ERROR in ./~/velocity-react/velocity-transition-group.js
    Module not found: Error: Cannot resolve module 'lodash/lang/isEqual' in C:\xampp\htdocs\Wizer\tools\node_modules\velocity-react
     @ ./~/velocity-react/velocity-transition-group.js 47:11-41
    
    ERROR in ./~/velocity-react/velocity-component.js
    Module not found: Error: Cannot resolve module 'lodash/object/keys' in C:\xampp\htdocs\Wizer\tools\node_modules\velocity-react
     @ ./~/velocity-react/velocity-component.js 39:8-37
    
    ERROR in ./~/velocity-react/velocity-transition-group.js
    Module not found: Error: Cannot resolve module 'lodash/object/keys' in C:\xampp\htdocs\Wizer\tools\node_modules\velocity-react
     @ ./~/velocity-react/velocity-transition-group.js 48:8-37
    
    ERROR in ./~/velocity-react/velocity-component.js
    Module not found: Error: Cannot resolve module 'lodash/object/omit' in C:\xampp\htdocs\Wizer\tools\node_modules\velocity-react
     @ ./~/velocity-react/velocity-component.js 40:8-37
    
    ERROR in ./~/velocity-react/velocity-transition-group.js
    Module not found: Error: Cannot resolve module 'lodash/object/omit' in C:\xampp\htdocs\Wizer\tools\node_modules\velocity-react
     @ ./~/velocity-react/velocity-transition-group.js 49:8-37
    
    ERROR in ./~/velocity-react/velocity-transition-group.js
    Module not found: Error: Cannot resolve module 'lodash/collection/each' in C:\xampp\htdocs\Wizer\tools\node_modules\velocity-react
     @ ./~/velocity-react/velocity-transition-group.js 44:8-41
    
    ERROR in ./~/velocity-react/velocity-transition-group.js
    Module not found: Error: Cannot resolve module 'lodash/object/extend' in C:\xampp\htdocs\Wizer\tools\node_modules\velocity-react
     @ ./~/velocity-react/velocity-transition-group.js 45:10-41
    
    ERROR in ./~/velocity-react/velocity-transition-group.js
    Module not found: Error: Cannot resolve module 'lodash/collection/pluck' in C:\xampp\htdocs\Wizer\tools\node_modules\velocity-react
     @ ./~/velocity-react/velocity-transition-group.js 50:9-43
    
    opened by nealoke 8
  • Uncaught Velocity.RegisterEffect not found. however I do require('velocity-animate/velocity.ui').

    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.

    opened by miketamis 8
  • Requiring UI Pack with Webpack

    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.

    opened by travisbloom 8
  • registerEffect ignores last item in calls array / goes out of order / resets at every step

    registerEffect ignores last item in calls array / goes out of order / resets at every step

    velocity Description: I have an animation that has nine steps, of which 5 are locations visible in the top-down 2D view offered in this GIF. tagging @finneganh and @Rycochet as I don't know what part is causing this... Expected: it should go from A to B C D and E Actual: A B A C A D A E - It might also simply be resetting all styles or have some issue with delay not being put in?

    import React from 'react'
    import ReactDOM from 'react-dom'
    import { VelocityComponent, velocityHelpers } from 'velocity-react'
    require('velocity-animate')
    require('velocity-animate/velocity.ui')
    
    const AnimationName = velocityHelpers.registerEffect({
      defaultDuration: 5000,
      calls: [
        [{
          translateX: '10vw',
          translateY: '32.3vw',
          translateZ: '10vw'
        }],
        [{
          translateX: '44.2vw',
          translateY: '39.5vw',
          translateZ: '5vw'
        }],
        [{
          translateX: '44.2vw',
          translateY: '39.5vw',
          translateZ: '0vw'
        }],
        [{
          translateX: '44.2vw',
          translateY: '39.5vw',
          translateZ: '8vw'
        }],
        [{
          translateX: '44.5vw',
          translateY: '58.7vw',
          translateZ: '5vw'
        }],
        [{
          translateX: '64vw',
          translateY: '58vw',
          translateZ: '5vw'
        }],
        [{
          translateX: '64vw',
          translateY: '58vw',
          translateZ: '0vw'
        }],
        [{
          translateX: '64vw',
          translateY: '58vw',
          translateZ: '8vw'
        }],
        [{
          translateX: '64.5vw',
          translateY: '84.6vw',
          translateZ: '0vw'
        }]
      ]
    })
    
    class VelocityBug extends React.Component {
      constructor (props) {
        super(props)
    
        this.state = {
          animationStarted: false
        }
      }
    
      componentDidMount () {
        window.setTimeout(
          this.setState({
            animationStarted: true
          })
        , 2000)
      }
    
      render () {
        return (
          <div style={{
            width: '100vw',
            height: '100vw',
            position: 'relative',
            background: 'purple'
          }}>
            <VelocityComponent animation={this.state.animationStarted ? AnimationName : null}>
              <div style={{
                position: 'absolute',
                width: '9vw',
                height: '9vw',
                background: 'orange'
              }} />
            </VelocityComponent>
          </div>
        )
      }
    }
    
    ReactDOM.render(<VelocityBug />, document.getElementById('root'))
    
    opened by PascalPixel 7
  • Begin & Complete callbacks firing for both enter and leave.

    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.

    opened by SethTompkins 7
  • Problem with animation sequence with delay

    Problem with animation sequence with delay

    Hi there. Thanks for that great project, it's really nice. Could you help me please, I want to animate my block one by one, depending on some conditions like props on my parent component. First of all I want to animate translateY property, and after that translateX, but when condition changes I want to reverse it - change translateX, and change translateY after that. I know that there is complete callback, but It would be great to not use state for this, because of my animation will be triggered on scroll event and I don't want to rerender all component. How can I achieve that? I'll be grateful for any ideas you'll give, thanks. That's my code:

       <VelocityComponent 
                            animation = {
                                {
                                    translateY: this.props.collapse ? -300 : 0,                        
                                }
                            }
                            duration = {500}                        
                            delay = {500}>                                                               
                                <i className = 'points__item'></i>
                        </VelocityComponent >  
    
    opened by maximusnikulin 6
  • Upgrading to react 17 gives error

    Upgrading to react 17 gives error

    Hi Guys,

    Today i updated my project to react 17 and I got this error

    Transition.push../node_modules/velocity-react/node_modules/react/lib/ReactBaseClasses.js.ReactComponent.setState
    
    Screen Shot 2021-01-19 at 2 48 02 pm
    opened by Bluefitdev 1
  • Issue in Webpack production build

    Issue in Webpack production build

    In a Webpack production bundle, slideDown on VelocityComponent appears to work fine until the end of the animation, where it sets the height back to 0. There are no errors and I haven't the slightest clue as to what could be causing this. Everything works beautifully in dev mode.

    Here's my Webpack config. Hopefully someone has some insight.

    const path = require('path')
    const TerserPlugin = require('terser-webpack-plugin')
    
    const env = process.env.NODE_ENV
    
    module.exports = {
      mode: env || `production`,
      devtool: env === `production` ? `source-map` : `eval-source-map`,
      entry: {
        index: { import: `./Scripts/React/src/index.js`, dependOn: 'shared' },
        shared: [
          `core-js/es/promise`,
          `core-js/es/array/from`,
          `whatwg-fetch`,
          `velocity-animate`,
        ],
      },
      output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'Scripts/React/dist'),
      },
      // optimization: {
      //   minimizer: [
      //     new TerserPlugin({
      //       terserOptions: {
      //         output: {
      //           comments: false,
      //         },
      //       },
      //       sourceMap: true,
      //     }),
      //   ],
      // },
      module: {
        rules: [
          {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: [
              {
                loader: 'babel-loader',
                options: {
                  presets: [
                    [
                      '@babel/preset-env',
                      {
                        // debug: true,
                        corejs: 3.6,
                        useBuiltIns: 'usage',
                      },
                    ],
                    ['@babel/preset-react'],
                  ],
                  plugins: ['babel-plugin-styled-components'],
                },
              },
              {
                loader: 'eslint-loader',
              },
            ],
          },
          {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            use: [
              {
                loader: 'file-loader',
                options: {
                  name: '[name].[ext]',
                  outputPath: 'fonts',
                  publicPath: '/App/Scripts/React/dist/fonts',
                },
              },
            ],
          },
        ],
      },
    }
    
    opened by zackphilipps 0
  • TransitionGroup CJS require not valid

    TransitionGroup CJS require not valid

    What is the issue?

    In the latest version of velocity-react, you have used the latest react-transition-group.

    On it, they export the TransitionGroup component as the default export. Go to the line

    But in your velocity-transition-group.js file, you have required it as the CJS module and without mentioning the default key. Go to the line

    How to fix?

    After an hour of debugging, I saw the line unexpectedly. I require it as a default then it works fine.

    Please check and fix this issue!

    opened by Vasikaran 1
  • next is not a function

    next is not a function

    We have a <VelocityTransitionGroup> as follows:

    <VelocityTransitionGroup
      enter={{
        animation: 'fadeIn',
        display: 'flex',
        duration: 150,
        delay: 0,
      }}
      leave={{
        animation: 'fadeOut',
        duration: 150,
        delay: 90,
      }}
    >
      …
    </VelocityTransitionGroup>
    

    In certain circumstances -- I'm not sure exactly, but it might be when we've unmounted the parent component before the animation finishes -- we get an exception here in velocity.js (v1.5.2). That next is from $.queue. Nothing in the $.queue docs suggest that next will ever be null.

    This may be a bug for jQuery or Velocity or may be a problem with how we're using the code; please let me know if you think I should file this elsewhere.

    opened by jamesarosen 1
  • TypeError Cannot read property 'length' of null in velocity-component.js (v1.4.1)

    TypeError Cannot read property 'length' of null in velocity-component.js (v1.4.1)

    I use this module via https://github.com/storybooks/react-treebeard and saw an error:

    TypeError Cannot read property 'length' of null in velocity-component.js

    It seems here (line 158):

    https://github.com/google-fabric/velocity-react/blob/b65e87fc00b9eab5c8ef0738eedac088853562ce/src/velocity-component.js#L157-L159

    From our sentry:

    screen shot 2019-03-05 at 15 58 34

    For now I'll disable animations on react-treebeard to avoid this issue; I've reported it for those who saw the same errors, anyway.

    opened by gfx 5
Releases(v1.4.3)
Owner
Fabric
The Tools You Need to Build the Best Apps
Fabric
Build custom animation components in React using typescript

Build custom animation components in React using typescript

Hoa Xuan Vo 3 May 6, 2022
⚛️ A React hook for animating components when they are mounted and unmounted. Fast and tiny.

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

Kirill Vasiltsov 67 Oct 23, 2022
👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies

React Tilt ?? Easily apply tilt hover effect on React components Demo ?? Install npm install react-parallax-tilt Features Lightweight (3.8kB), zero de

mkosir 591 Nov 26, 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
Data representation and manupulation in React JS Function Based Components

Description Data representation and manupulation in React JS Function Based Components. Count, Self Increasing Seconds Data Representation Todo List D

Chanchal Kumar Mandal 1 May 8, 2022
🚀 Smooth Liquid Swipe Animation to transition between different components.

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

Ashutosh Hathidara 359 Nov 30, 2022
painless transitions built for react-router, powered by react-motion

React Router Transition Painless transitions for React Router, powered by React Motion. Example site. Requirements To use the latest version of this p

Richard Maisano 2.6k 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-animated-numbers - 👾 Library showing animation of number changes in react.js

react-animated-numbers - ?? Library showing animation of number changes in react.js

Yeongsu Han 139 Nov 28, 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
Animated sidebar using react , react icon

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Sumit Harijan 4 Jan 17, 2022
Project build: REACT CREATE APP / REDUX / REDUX-TOOLKIT / REACT-SPRING / SCSS

This project was bootstrapped with Create React App, using the Redux and Redux Toolkit template. designed by Om Arya Available Scripts In the project

Discord: Fpsska#1531 1 Aug 2, 2022
React-todo-app-with-framer-motion - TodoMVC App with React hooks and Framer Motion

TodoMVC App with React hooks and Framer Motion CleanShot.2022-01-29.at.18.27.06.

Miguel Ángel Durán 27 Nov 30, 2022
React-animate-style - A react integration of animate.css (animate.style)

react-animate-style Easy animate react app with animate.css library Install With

null 2 Jul 30, 2022
React Just Parallax - React library for scroll and mousemove parallax effect

React Just Parallax React library for scroll and mousemove parallax effect ✨ Open source, production-ready This repo contains the source code for Reac

Michal Zalobny 285 Dec 5, 2022
Animation engine designed for React

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

Rares Mardare 74 Oct 3, 2022
Easily animate your data in react

data-driven-motion Easily animate your data in react This is a small wrapper around react-motion with the intention of simplifying the api for my most

Kye Hohenberger 531 Nov 26, 2022
(ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

react-anime (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React built on top of Julian Garnier's anime.js. Just place an <Anime> component and what

HyperFuse 1.5k Dec 3, 2022