• This repository has been archived on 05/Oct/2022
  • Stars
    star
    285
  • Rank 145,115 (Top 3 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created almost 6 years ago
  • Updated about 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Animation components and styles for React projects

React Animation πŸ‘Œ

Coverage Status NPM version

Components and animations to easily add movement to your React project

Demos

You can see each of the components and animations that are included on this demo page.

Usage

npm install --save react-animation

Components

The following components can be used to easily add animation to specific circumstances.

AnimateOnChange

It can be helpful to let users know when something has changed in our UI. This component aims to help by adding an animation to any content that changes.

<AnimateOnChange>{value or child components}</AnimateOnChange>

The AnimateOnChange component will automatically fade out old content and fade in the new content when the content changes. This could be a number or string or any child components.

The following (optional) properties can be used:

  • animationIn
  • animationOut
  • className
  • durationOut
  • style

By default, the animation used is a fade out and in. You can specify an animation for both the out (when the old content is removed) and in (when new content is shown) stages of the animation.

You can reference these by name, for example:

<AnimateOnChange animationIn="popIn" animationOut="popOut">...</AnimateOnChange>

This will apply a popOut animation when removing the old content, and a popIn animation on the new content.

Custom animationInand animationOut values

You can specify a built-in animation by name and it will call in the relevant animation property for you. If you prefer you can also supply a string here such as my-animation 500ms ease-out forwards. This way you can specify your own animation, as long as you've defined the my-animation keyframes somewhere.

ClassName

If you need more control, such as animating child components of pseudo-elements, you can supply a class name. By default, the component will add a animate-on-change class along with either animate-on-change-in and animate-on-change-out depending on the stage of the animation.

You can supply a className of "foo" and it will apply foo, foo-in and foo-out as necessary.

HideUntilLoaded

Nobody likes a half-downloaded image appearing when rendering our UI. This component helps by hiding any children content until a specified image has finished downloading.

<HideUntilLoaded imageToLoad="[IMAGE_URL]">Your content</HideUntilLoaded>

By default the component will apply an opacity of 0 and then a transition when loading has completed. This will fade in the fully downloaded content.

You can supply animationIn an animation name to use that instead of the default fade.

Spinners

You can specify any React component as a "spinner" or loading indicator. This will be shown while the loading is taking place, and then removed once the content is ready to be shown.

import MySpinner from '../MySpinner' // This could be an animated SVG or any React component

<HideUntilLoaded imageToLoad="[IMAGE_URL]" Spinner={Spinner}>Your content</HideUntilLoaded>

AnimateGroup

This component makes it easy to animate additions and deletions to a group of components.

<AnimateGroup animation="slide">{children}</AnimateGroup>

It is important for every child to have a unique key, in order for the component to detect changes to the group as children are added and removed.

Animations and transitions can be specified in the same way as for AnimateOnChange, using animationIn and animationOut properties. Alternatively, AnimateGroup supports the convenience property animation which allows the base name of the animation to be specified; so for example, setting animation="bounce" is equivalent to setting the properties animationIn="bounceIn" animationOut="bounceOut".

Note that this component is different to AnimateOnChange as it only animates addition of new elements and removal of existing ones; changes to existing elements are not animated. However, animation of updates to elements can be simulated by changing the child key when its value changes; this will be equivalent to removing the child's old value and replacing it with a new child with the new value.

Animations

This package includes some pre-built animations along with their associated keyframes. As well as supplying the animation names to the above components, you can also apply these animations directly to your components:

import { animations } from 'react-animation'

const style = {
  animation: animations.popIn
}

<MyComponent style={style} />

In this example, popIn evaluates to pop-in 500ms cubic-bezier(0.19, 1, 0.22, 1) forwards.

The following animations are included:

  • fadeIn
  • fadeOut
  • fadeInUp
  • popIn
  • popOut
  • bounceIn
  • bounceOut
  • slideIn
  • slideOut

Using your own styles

You can pass any custom styles into the AnimateOnChange and HideUntilLoaded using the style property.

Easings

As well as pre-built animations, this package includes a range of timing functions you can use in animations and transitions.

The full set can be seen in action on the demo page.

You can apply these to your component styles like so:

import { easings } from 'react-animation'

const style = {
  animation: `pop-in ${easings.easeOutExpo} 500ms forwards`
}

<MyComponent style={style} />

The full list includes:

  • linear
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInBack
  • easeOutBack
  • easeInOutBack

FAQ

What is this for?

This package is for situations where UI needs to move or animate. These situations could include when data changes, or when an item takes a while to fully load a large background image.

The package also contains pre-built animations that can be applied to components.

Why not use ReactTransitionGroup for many of the use cases?

ReactTransitionGroup is a useful and powerful approach to adding animation to elements, and you could certainly do most of what this package does with it. However you would need to define animation keyframes manually, and style each stage of each animation using classes.

This package aims to help when adding UI movement by making common actions easier. So for situations such as when data changes, or when an element needs to wait until loading has completed before animating into place, this package offers an easier way.

One benefit of this is ensuring that the animations you add to UI elements "feel" the same across a site or app.

ReactTransitionGroup provides a good approach to timing and managing classes but doesn't bring any animations or timing functions.

License

Copyright 2019 NearForm

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.

You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS,

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing permissions and limitations under the License.

More Repositories

1

graphql-hooks

🎣 Minimal hooks-first GraphQL client
TypeScript
1,878
star
2

temporal_tables

Postgresql temporal_tables extension in PL/pgSQL, without the need for external c extension.
PLpgSQL
429
star
3

fast-jwt

Fast JSON Web Token implementation
JavaScript
330
star
4

nscale

Deployment just got easy
JavaScript
325
star
5

sql

SQL injection protection module
JavaScript
201
star
6

react-browser-hooks

React Browser Hooks
JavaScript
128
star
7

udaru

Open source Access Manager for node.js
JavaScript
125
star
8

node-cephes

Implementation of special functions and distributions mathematical functions from the cephes library.
C
115
star
9

the-fastify-workshop

A workshop about Fastify
JavaScript
113
star
10

gammaray

Node.js vulnerability scanner
Go
104
star
11

autopsy

dissect your dead node services with mdb via a smart os vm
JavaScript
89
star
12

fastify-auth0-verify

Auth0 verification plugin for Fastify
JavaScript
87
star
13

titus

Deploy useful features in sprint one
JavaScript
61
star
14

micro-services-tutorial-iot

An instructor led microservices workshop
JavaScript
54
star
15

developing-microservices

A workshop on microservices in nodejs
JavaScript
54
star
16

heap-profiler

Heap dump and sample profiler generator for Node.
JavaScript
52
star
17

docker-cloudwatch

Docker Cloudwatch
JavaScript
46
star
18

promises-workshop

Broken Promises Exercises
HTML
45
star
19

polaris

NearForm multi-platform application accelerator
JavaScript
35
star
20

nscale-workshop

Nodeconf.eu nscale workshop
35
star
21

well

well
JavaScript
35
star
22

nceubadge

The NodeConf EU 2017 Badge
HTML
34
star
23

owasp-top-ten-workshop

NearForm OWASP Top Ten Security Vulnerabilities Workshop
JavaScript
34
star
24

graphql-auto-federate

Automatically federate a Mercurius GraphQL service
JavaScript
32
star
25

trail

Audit trail log service
JavaScript
32
star
26

slow-rest-api

A REST API that is slow
HTML
31
star
27

stats

πŸ“Š Collect stats about your node.js process πŸ“Š
JavaScript
29
star
28

node-hidden-markov-model-tf

A trainable Hidden Markov Model with Gaussian emissions using TensorFlow.js
JavaScript
28
star
29

autocannon-ui

A graphical user interface for autocannon providing the same user experience
JavaScript
28
star
30

react-pwa

Hackernews Progressive Web Application built with React
JavaScript
28
star
31

open-banking-reference-app

NearForm reference application for open banking - https://community.nearform.com/api-banking
TypeScript
27
star
32

react-redux-typescript-saga-immutable

Sample React boilerplate written in TypeScript, including React Router, Redux, Redux Saga, ImmutableJS and Styled Components.
TypeScript
27
star
33

fastify-overview-ui

UI for fastify-overview
JavaScript
26
star
34

minishift-demo

Demo for local development using minishift
Shell
25
star
35

reviewbot

A bot to assist with code reviews via AI
JavaScript
25
star
36

get-jwks

Fetch utils for JWKS keys
JavaScript
23
star
37

sharing-components

JavaScript
23
star
38

tf-modules-example

Code example for the reusable, configurable Terraform modules blog post
HCL
22
star
39

aws-proxy-pattern

Terraform module to create a transparent proxy within AWS
HCL
20
star
40

openapi-transformer-toolkit

Automate design-first API workflows by generating schemas and types from OpenAPI specs.
TypeScript
20
star
41

fastify-casbin

A plugin for Fastify that adds support for Casbin
JavaScript
19
star
42

the-graphql-workshop

A workshop about GraphQL with mercurius
JavaScript
18
star
43

choo-pwa

PWA with Choo
JavaScript
17
star
44

no-gres

A small module to mock pg for testing purposes.
JavaScript
17
star
45

nscale-docs

Documentation for nscale
17
star
46

optic

App for generating OTP tokens for 2FA protected accounts
JavaScript
17
star
47

initium-platform

A set of Kubernetes add-ons with optimal configuration and test coverage to create a day zero platform for your code
Go
16
star
48

optic-release-automation-action

Automate the release process of your npm modules, apps and actions
JavaScript
15
star
49

brokeneck

Admin UI for Auth0, Azure AD and AWS Cognito
JavaScript
15
star
50

node-test-runner-workshop

The Node.js Test Runner Workshop
JavaScript
14
star
51

graphql-hooks-workshop

HTML
14
star
52

react-patterns-workshop

A workshop which covers intermediate and advanced React usage patterns
JavaScript
14
star
53

node-test-github-reporter

A GitHub test reporter for the Node.js test runner
JavaScript
14
star
54

mira

The Mira Accelerator fast-tracks the setup of common Amazon Web Services (AWS) Serverless infrastructure
TypeScript
13
star
55

react-native-apple-wallet-demo

Create Custom Apple Wallet Passes with React Native and Fastify
JavaScript
13
star
56

langchain-google-calendar

A spike project: allows natural language to create actions in Google Calendar
TypeScript
12
star
57

fastify-casbin-rest

A plugin for Fastify that adds support for Casbin's REST model
JavaScript
12
star
58

cloudwatchlogs-stream

Stream interfacet to CloudWatch Logs
JavaScript
11
star
59

mercurius-apollo-registry

A Mercurius plugin for schema reporting to Apollo Studio
JavaScript
11
star
60

leaistic

An ElasticSearch manager
JavaScript
11
star
61

stats-to-elasticsearch

Collect and send stats about your node.js process to elasticsearch. πŸ“ŠπŸ”ŒπŸ“ˆ
JavaScript
10
star
62

nceubadge2018

NodeConf EU 2018 Badge code and hardware design files
JavaScript
10
star
63

openshift-kafka

Run Apache Kafka in Openshift Origin
Smarty
10
star
64

create-stats-dashboard

πŸ“ˆ A wrapper to create and initialise a stats dashboard on kibana using import-kibana-dashboard, for easy manipulation of stats sent via stats-to-elasticsearch πŸ“‰
JavaScript
10
star
65

fastify-mssql

MSSQL Plugin for Fastify
JavaScript
10
star
66

mercurius-explain

A Mercurius plugin that shows the execution time of each resolver in a query
JavaScript
10
star
67

the-micro-frontends-workshop

The Micro Frontends Workshop with Module Federation
JavaScript
9
star
68

commentami

A 'google docs' like commenting system
JavaScript
9
star
69

zoom-shuffle-bot

Zoom Chatbot used to retrieve a randomized list of your current meeting's participants
JavaScript
9
star
70

jsnation-node-workshop

Our workshop at JSNation 2019
JavaScript
9
star
71

optic-expo

Secure 2FA OTP via Mobile Push Notifications
TypeScript
8
star
72

choo-data

Simple data fetching plugin for Choo with server-side rendering support
JavaScript
8
star
73

nodeconfeu-gesture-models

Ongoing attempts at gesture models
C++
8
star
74

slack-knowledgebase-chatgpt-responder

ChatGPT powered slack responder to the questions that are about NearForm knowledge base
JavaScript
8
star
75

initium

Deploy your code on day zero, avoiding vendor lock-in.
7
star
76

playwright-firebase

A plugin to handle Firebase authentication in Playwright tests
TypeScript
7
star
77

docker-container

JavaScript
7
star
78

otlp-blueprint

Open Telemetry + Jaeger + 3-tier application Blueprint
HCL
7
star
79

pwa-poc

PWA for proof of concept for sharing images, qrcode scanning and geolocation from a PWA
JavaScript
7
star
80

slidev-theme-nearform

NearForm theme for sli.dev presentations
CSS
6
star
81

saluki

Utility based CSS-in-JS theming
JavaScript
6
star
82

fastify-secrets-aws

Fastify secrets plugin for AWS Secrets Manager
JavaScript
6
star
83

fastify-cloud-run

Fastify on Google Cloud Run
JavaScript
6
star
84

iot-system

A fuge config for a demo iot system
JavaScript
6
star
85

fastify-slow-down

A slow down plugin for fastify
JavaScript
6
star
86

github-action-check-linked-issues

GitHub action to check if pull requests have their corresponding issues.
JavaScript
6
star
87

github-board-slack-notifications

Send notifications to a Slack channel for any changes that are performed in a GitHub board (Projects v2 / beta)
JavaScript
6
star
88

openshift-ansible

Ansible code for openshift
Python
5
star
89

fastify-jwt-jwks

JSON Web Key Set (JWKS) verification plugin for Fastify
JavaScript
5
star
90

memleak-exercise

JavaScript
5
star
91

github-action-notify-release

GitHub Action that automatically creates an issue with an overview of the commits that are waiting to be released
JavaScript
5
star
92

fastify-ravendb

Fastify RavenDB connection plugin
JavaScript
5
star
93

fastify-secrets-azure

Fastify secrets plugin for Azure Key Vault
JavaScript
5
star
94

anger

pub-sub tester for Nes
JavaScript
5
star
95

choo-bundles

Bundle splitting with HTTP2 push support for Choo with choo-ssr
JavaScript
5
star
96

sentinel

Sentinel - a testing & monitoring application
JavaScript
5
star
97

mercurius-explain-graphiql-plugin

A Graphiql plugin to show the results from mercurius-explain
JavaScript
5
star
98

azure-workshop

Azure Workshop on Kubernetes
JavaScript
5
star
99

webinar-streams

Examples for the streams Webinar
JavaScript
4
star
100

initium-cli

CLI tool for the Initium project
Go
4
star