re-spring-css

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-css
yarn install
yarn start

Licence

MIT