React Smooth Flow

Implement animations for entering, exiting, and updating elements without much effort. React Smooth Flow is designed to simplify complex animations while providing control over transition behavior, making it suitable for any React project, from small components to large SPAs.

Install

Run one of the following commands to add React Smooth Flow to your project:

npm i react-smooth-flow

pnpm add react-smooth-flow

yarn add react-smooth-flow

Additional steps

Some library features require global import of styles. If you skip this step, you may get unexpected behavior of animations.

// Import at root, e.g. Next.js: app/layout, Vite: src/main, etc.
import 'react-smooth-flow/style.min.css';

Usage

Let's create your first animation! Start by creating a new component.

import { useState } from 'react';

export default function ExpandableSection() {
  const [isExpanded, setExpanded] = useState(false);

  return (
    <>
      {isExpanded ? (
        <section
          style={{
            background: 'white',
            color: 'black',
            fontSize: 22,
            width: 300,
            padding: 25,
            borderRadius: 25,
          }}
        >
          <button
            onClick={() => setExpanded(false)}
            style={{
              float: 'right',
              width: 25,
              height: 25,
              marginLeft: 5,
              marginBottom: 5,
              border: 'none',
              borderRadius: '50%',
              cursor: 'pointer',
            }}
          >
            X
          </button>
          <p>Lorem...</p>
        </section>
      ) : (
        <button
          onClick={() => setExpanded(true)}
          style={{
            background: 'white',
            color: 'black',
            fontSize: 18,
            padding: '7px 10px',
            border: 'none',
            borderRadius: 5,
            cursor: 'pointer',
          }}
        >
          Expand
        </button>
      )}
    </>
  );
}

Now let's spice things up with a few lines of code

import { useState } from 'react';
+ import { Binder, startTransition, TransitionOptions } from 'react-smooth-flow';

+ const sectionTransitionOptions: TransitionOptions = {
+  duration: 500,
+  contentEnterKeyframes: { opacity: [0, 0, 1] },
+  contentExitKeyframes: 'reversedEnter',
+ };

export default function ExpandableSection() {
  const [isExpanded, setExpanded] = useState(false);

  return (
    <>
      {isExpanded ? (
+       <Binder transitions={{ section: sectionTransitionOptions }}>
          <section
            style={{
              background: 'white',
              color: 'black',
              fontSize: 22,
              width: 300,
              padding: 25,
              borderRadius: 25,
            }}
          >
            <button
-             onClick={() => setExpanded(false)}
+             onClick={() => startTransition(['section'], () => setExpanded(false))}
              style={{
                float: 'right',
                width: 25,
                height: 25,
                marginLeft: 5,
                marginBottom: 5,
                border: 'none',
                borderRadius: '50%',
                cursor: 'pointer',
              }}
            >
              X
            </button>
            <p>
              Lorem...
            </p>
          </section>
+       </Binder>
      ) : (
+       <Binder transitions={{ section: sectionTransitionOptions }}>
          <button
-           onClick={() => setExpanded(true)}
+           onClick={() => startTransition(['section'], () => setExpanded(true))}
            style={{
              background: 'white',
              color: 'black',
              fontSize: 18,
              padding: '7px 10px',
              border: 'none',
              borderRadius: 5,
              cursor: 'pointer',
            }}
          >
            Expand
          </button>
+       </Binder>
      )}
    </>
  );
}

Advantages over View Transition API

• supports all major modern browsers

• higher customizability

• provides more control over the document, you can specify which elements will be animated per call

  document.startViewTransition(() => updateDOMSync());
  // VS
  startTransition(['tag1', 'tag2'...], () => updateDOMSync());

  Since only specific parts of the document get animated, the entire view is not getting blocked while animations are running, but only animated elements. This also allows us to run multiple animations at the same time for different elements and previous animation will not be interrupted.

• allows to specify a root for an element on animation

  By default all animations get performed on so-called overlay root. This avoids issues with cross-container transitions where element moves between containers, but if at least one of these have overflow of any other value than visible, you'll get unexpected behavior of an animation. But in some cases you may want to intentionally restrict visibility of an element while animated. Or you may want your animation to tolerate complex-moving element, like with position: sticky or translate animation running on it. That's where root comes into play.

Disadvantages over View Transition API

• cross-document transitions are technically impossible

  Keep in mind that you can still implement animations between routes in SPAs. React Smooth Flow even allows you to create shared element transitions.

License

React Smooth Flow is MIT-licensed open-source software by Kokapuk.

Contact

If you need a help or have any questions, feel free to reach out through any of following:

• Telegram
• Discord
• [email protected]