Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/SanderSpies/react-magician
Declaratively animate React components
https://github.com/SanderSpies/react-magician
Last synced: about 1 month ago
JSON representation
Declaratively animate React components
- Host: GitHub
- URL: https://github.com/SanderSpies/react-magician
- Owner: SanderSpies
- Created: 2014-11-14T14:16:06.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2015-04-22T15:43:40.000Z (over 9 years ago)
- Last Synced: 2024-08-02T05:19:59.545Z (4 months ago)
- Language: JavaScript
- Homepage: http://sanderspies.github.io/react-magician/examples/simple/index.html
- Size: 937 KB
- Stars: 166
- Watchers: 5
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React Magician
===
Declaratively animate React components. React Magician aims to be simple to use, yet flexible and powerful.
Example:
```
this.animations = {
fooBarAnimation: Animation.create({
'0ms': { // time based
blockA: {
left: 0,
position: 'absolute',
top: 0,
width: 200,
transform: 'rotate(0deg)'
},
blockB: { // yes, we support multiple elements
left: 0
}
},
'a: ?ms': { // we don't know how long this lasts, the spring easing determines when it ends.
// a: indicates a label with the name a
blockA: {
left: 100,
transform: 'rotate(90deg)', // we automatically make this work for you
easing: EasingTypes.spring({
mass: 1,
spring: 30,
damping: 4
})
}
},
'400ms': { // here we animate the top based on time, with the default linear easing
blockA: {
top: 300
}
},
'b: ?ms': {
blockB: {
left: 1000,
easing: EasingTypes.spring({
mass: 1,
spring: 50,
damping: 3
})
}
},
'a + 100ms': { // 100ms after animation block with label a is done
blockA: {
left: 20
}
},
'a + 2000ms': {
blockA: {
left: 100
}
},
'a + b + 200ms': { // 200ms after both a and b are done
blockB: {
left: 100
}
}
})
};
```
Future plans
---
The current focus is on the API, and making it simple to orchestrate complex animations based on time, touch or mouse.
For now we're mostly focusing on making sure the timing API provides everything that's needed.
Performance:
- re-use objects
LICENSE
---
MIT