re-spring-css

    0.2.0 • Public • Published

    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

    Install

    npm i re-spring-css

    DownloadsWeekly Downloads

    0

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    256 kB

    Total Files

    18

    Last publish

    Collaborators

    • davesnx