CSS-keyframes animations in Reason
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's an implementation in ReasonML of gerardabello/spring-animation-keyframes, all credits to him: @gerardabello.
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",
);
CSS animations runs at 60FPS (or more) even if the main thread is busy with parsing/executing JavaScript.
I have a list of issues to improve it here
git clone https://github.com/davesnx/re-spring-css
yarn install
yarn start
MIT