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 or 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, all credits to him: @gerardabello.
How it works
This module depends on bs-css, ensure that you install both!
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( <div className=Styles.root> {ReasonReact.string("Hello!")} </div>, "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
git clone https://github.com/davesnx/re-spring-cssyarn installyarn start
Licence
MIT