https://github.com/davesnx/re-spring-css
CSS-keyframes animations in Reason
https://github.com/davesnx/re-spring-css
animation css reason spring
Last synced: over 1 year ago
JSON representation
CSS-keyframes animations in Reason
- Host: GitHub
- URL: https://github.com/davesnx/re-spring-css
- Owner: davesnx
- Created: 2019-06-17T09:45:14.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-10-26T15:22:18.000Z (over 6 years ago)
- Last Synced: 2025-02-28T08:19:13.213Z (over 1 year ago)
- Topics: animation, css, reason, spring
- Language: JavaScript
- Homepage:
- Size: 197 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# re-spring-css
re-spring-css makes it easy to create keyframes animations in Reason.
You define a spring: giving a tension and a friction (like [chenglou/react-motion](https://github.com/chenglou/react-motion) or [react-spring.io](https://www.react-spring.io)) and it would create the keyframe!
- It runs at 60 FPS.
- Doesn't block the DOM, like JavaScript-based animation libs.
- Can't be canceled or dynamically treated.
It's an implementation in ReasonML of [gerardabello/spring-animation-keyframes](https://github.com/gerardabello/spring-animation-keyframes), all credits to [him: @gerardabello](https://github.com/gerardabello).
## How it works
This module depends on [bs-css](https://github.com/SentiaAnalytics/bs-css), ensure that you install both!
```reason
module Styles = {
open Css;
open ReSpring;
let fade =
createPropertyKeyFrame(
~tension=120.,
~friction=40.,
~initialValue=0.,
~finalValue=1.,
~property=Css.opacity,
);
let jump =
createTransformKeyFrame(
~tension=120.,
~friction=40.,
~initialValue=0.,
~finalValue=100.,
~transform=Css.translateX,
);
let crazyAnimation = Css.keyframes(merge(jump, fade));
let root =
style([
width(px(50)),
height(px(50)),
backgroundColor(rgb(0, 0, 0)),
animationName(crazyAnimation),
animationDuration(2000),
unsafe("animation-iteration-count", "infinite"),
]);
};
ReactDOMRe.renderToElementWithId(
{ReasonReact.string("Hello!")} ,
"index",
);
```
## Why
CSS animations runs at 60FPS (or more) even if the main thread is busy with parsing/executing JavaScript.
## Contribute (Help!)
I have a list of issues to improve it [here](https://github.com/davesnx/re-spring-css/issues)
```bash
git clone https://github.com/davesnx/re-spring-css
yarn install
yarn start
```
## Licence
MIT