• This repository has been archived on 14/Apr/2020
  • Stars
    star
    811
  • Rank 54,705 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 8 years ago
  • Updated about 4 years ago

Reviews

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

Repository Details

Tween between view states with declarative zero configuration element motions for React

Element Motion

This has been archived. If you're looking for a solid implementation of an animation engine/FLIP style animations that are easy to use I highly recommend checking out Framer Motion.

The latest update with the animate prop truly is the nail in the coffin for Element Motion - it does everything this library does and more with a fantastic API.

Check it out here: https://www.framer.com/motion/


Tween between view states with declarative zero configuration element motions for React.

npm npm bundle size (minified + gzip)

Moving from a persisted element Moving to another distinct element Moving using a focal target

Dynamic motions as easy as:

<Motion triggerSelfKey={isLarge}>
  <Scale>{motion => <div {...motion} className={isLarge ? 'large' : 'small'} />}</Scale>
</Motion>

Get started

Check out our example motions and then once you're done have a look at the docs.

Installation

Element Motion requires React 16.4 or greater.

npm install @element-motion/core --save

or

yarn add @element-motion/core

Whats in a motion?

There are two halves to Element Motion:

  • Orchestration (collecting DOM data, enabling motion between disconnected React elements, executing motions)
  • Motions (animation concerns, CSS transitions/animations, JS animations, whatever you can imagine)

Next steps

Talks

Element Motion @ React Sydney 3rd June 2019 Slides
React Sydney - 3rd June 2019

More Repositories

1

typescript-transformer-handbook

πŸ“˜ A comprehensive handbook on how to create transformers for TypeScript with code examples
TypeScript
870
star
2

react-peer

Send data to someone else's browser as easy as setting state
TypeScript
197
star
3

awesome-typescript-ecosystem

😎 A list of awesome TypeScript transformers, plugins, handbooks, etc
116
star
4

armory-app

πŸ›‘ Guild Wars 2 Armory | gw2armory.com
JavaScript
72
star
5

react-sticky-header

🍯 A sticky header for React.js
JavaScript
54
star
6

armory-embeds

πŸ›‘ Embed Guild Wars 2 widgets on your site!
JavaScript
44
star
7

vite_plugin_deno_resolve

A plugin for Vite that resolves modules with Deno.
TypeScript
15
star
8

douges.dev

An interactive blog focusing on web & game dev. Written by Michael Dougall.
TypeScript
14
star
9

armory-component-ui

πŸ›‘ Common components and features for GW2Armory and GW2AEmbeds.
JavaScript
12
star
10

react-best-modal

Simple is best. Accessible out of the box, tiny api, bring your own styles.
TypeScript
11
star
11

armory-services

πŸ›‘ Guild Wars 2 Armory Services | api.gw2armory.com
JavaScript
9
star
12

armory-ng

πŸ›‘ Guild Wars 2 Armory Legacy AngularJS Build
JavaScript
8
star
13

ts-transform-define

Create global constants which can be configured at compile time using the TypeScript compiler.
TypeScript
7
star
14

deno_changesets

A Deno native way to manage versioning and changelogs.
TypeScript
6
star
15

gotta-validate

An async object validator for node.
JavaScript
6
star
16

react-connect-the-dots

β­• Dynamically positions a component between two elements, for React.js
JavaScript
5
star
17

TRIPLEX

What's this?
TypeScript
2
star
18

react-scroll-paginator

πŸ“ƒ A lightweight scroll based paginator for ReactJS. Opt out defer pagination until a user clicks a button!
JavaScript
2
star
19

react-debounce-decorator

β›Ή Useful for debouncing tooltips or anything you want to happen immediately, and be called back after a while.
JavaScript
2
star
20

html5.2-cheat-sheet

Collection of HTML examples that are relevant in HTML5.2
1
star
21

react-mouse-follow

React Mouse Follow to make a react element follow the mouse.
JavaScript
1
star
22

react-suspense-patterns

An example implementation of various React Suspense patterns.
JavaScript
1
star
23

function-batch

πŸ“¦ Higher order function that will batch all calls to the wrapped function over a time period, and then call the wrapped function once with all args.
JavaScript
1
star
24

json2tds

Proof of concept hackathon project to generate sitecore tds flat files from json
JavaScript
1
star
25

react-material-transitions-prototype

A material design transition prototyped with react.
JavaScript
1
star
26

live-retro

πŸ“š Streamlining agile retrospectives in realtime | https://bit.do/9retro
JavaScript
1
star
27

gw2-item-stats-api

Api to get access to rich item stats via the gw2 api [MANUALLY DEPLOYED TO AWS]
JavaScript
1
star
28

feeds-hackathon

Simple crud hackathon app for suggestion based cooking productivity.
JavaScript
1
star
29

react-scroll-store

πŸ“œ Stores scroll position on unmount and sets it back when the component is re-mounted.
JavaScript
1
star