Animation with the react-tweenful Library — Observers

With the react-tweenful library, we can render animations in our React app easily.

In this article, we’ll take a look at how to get started with the react-tweenful.

ObserverGroup

We can use the ObserverGroup component to watch for mounting and unmounting over a list of notifications.

For example, we can use it by writing:

import React, { useState } from "react";
import { ObserverGroup } from "react-tweenful";

const items = [
  { text: "foo", id: 1 },
  { text: "bar", id: 2 },
  { text: "baz", id: 3 }
];

export default function App() {
  const [notifications, setNotifications] = useState(items);

const removeNotification = (id) => {
    setNotifications((notifications) =>
      notifications.filter((n) => n.id !== id)
    );
  };

  return (
    <ObserverGroup
      config={{
        duration: 800,
        style: { overflow: "hidden" },
        mount: { opacity: [0, 1], height: ["0px", "auto"] },
        unmount: { opacity: [1, 0], height: ["auto", "0px"] },
        easing: "easeInOutCubic"
      }}
      skipInitial={true}
    >
      {notifications.map((notification) => (
        <div
          key={notification.id}
          onClick={removeNotification.bind(undefined, notification.id)}
        >
          {notification.text}
        </div>
      ))}
    </ObserverGroup>
  );
}

We have an items array which we use as the initial value of the notifications state.

Next, we add the removeNotification function that takes an id and removes the entry with the given id .

In the JSX, we use the ObserverGroup component to define our animation.

The config prop has various properties we set to add the animation.

duration has the duration of the animation.

style has style for the container.

mount has the styles to apply when we mount a component inside the ObserverGroup.

unmount has the styles to apply when we unmount a component inside the ObserverGroup .

The easing property has the easing function to apply.

skipInitial skips animation when the components loads when it’s set to true .

Now when we click on the div for the notifications entry, we should see the animation displayed.

Animate Route Transition

We can use react-tweenful to animate route transition.

For example, we can write:

App.js

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { ObserverGroup, Observer } from "react-tweenful";
import "./styles.css";

const colors = {
  red: "#EE4266",
  yellow: "#FDB833",
  blue: "#296EB4",
  green: "#0EAD69"
};

const observerProps = {
  className: "key-wrapper",
  duration: 1000,
  style: { opacity: 0 },
  mount: { opacity: 1 },
  unmount: { opacity: 0 },
  easing: "easeOutQuad"
};

const Red = () => (
  <ObserverGroup>
    <Observer.div {...observerProps}>
      <div
        className="color-block"
        style={{ backgroundColor: colors.red }}
      ></div>
    </Observer.div>
  </ObserverGroup>
);
const Yellow = () => (
  <ObserverGroup>
    <Observer.div {...observerProps}>
      <div
        className="color-block"
        style={{ backgroundColor: colors.yellow }}
      ></div>
    </Observer.div>
  </ObserverGroup>
);
const Blue = () => (
  <ObserverGroup>
    <Observer.div {...observerProps}>
      <div
        className="color-block"
        style={{ backgroundColor: colors.blue }}
      ></div>
    </Observer.div>
  </ObserverGroup>
);
const Green = () => (
  <ObserverGroup>
    <Observer.div {...observerProps}>
      <div
        className="color-block"
        style={{ backgroundColor: colors.green }}
      ></div>
    </Observer.div>
  </ObserverGroup>
);

export default function App() {
  return (
    <div>
      <Router>
        <ul className="nav-links">
          <li>
            <Link to="/transition/red">Red</Link>
          </li>
          <li>
            <Link to="/transition/yellow">Yellow</Link>
          </li>
          <li>
            <Link to="/transition/blue">Blue</Link>
          </li>
          <li>
            <Link to="/transition/green">Green</Link>
          </li>
        </ul>
        <Switch>
          <Route exact path={`/transition/red`}>
            <Red />
          </Route>
          <Route exact path={`/transition/green`}>
            <Green />
          </Route>
          <Route exact path={`/transition/blue`}>
            <Blue />
          </Route>
          <Route exact path={`/transition/yellow`}>
            <Yellow />
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

styles.css

.color-block {
  width: 100px;
  height: 100px;
}

We create the Red , Green , Blue , and Yellow components which we use as the route components.

We add them in between the Route components to use them as such.

Each of the component has the ObserverGroup and the Observer.div component to let us apply the animation effects specified in the observerProps object.

The colors object values are used in the same components to add colors.

We also have styles.css to change the size of the boxes in those components.

The Link component lets us load the routes when we click on the links.

Now we should see the boxes displayed with the color, and when they mount, we should see the transition.

Conclusion

We can use the ObserverGroup component to add transitions to groups of elements.

React-tweenful also works with React Router.