Chapter 1: Introduction to react-tweenful

The react-tweenful library simplifies the process of implementing animations in your React applications. In this article, we will explore how to utilize the react-tweenful.ObserverGroup component to manage animations for a list of notifications.

We can leverage the ObserverGroup to monitor the mounting and unmounting of notifications. Below is an example of how to set it up:

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>

{notifications.map((notification) => (

<div key={notification.id} onClick={() => removeNotification(notification.id)}>

{notification.text}

</div>

))}

</ObserverGroup>

);

}

In this code, we initialize an array of items to serve as our notification state. The removeNotification function allows us to delete a notification based on its ID. We utilize the ObserverGroup component to manage the animations.

The config prop includes several properties to customize the animation:

• duration: Specifies how long the animation should last.
• style: Defines the styles for the container.
• mount: Styles to apply when a component is added.
• unmount: Styles to apply when a component is removed.
• easing: The easing function used for the animation.
• skipInitial: When set to true, it disables the initial animation on component load.

With this setup, clicking on a notification will trigger the animation effect.

Here’s an insightful video to further illustrate these concepts:

Chapter 2: Animating Route Transitions

Beyond notifications, react-tweenful can also animate route transitions seamlessly. Below is an example of how this can be achieved:

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 = () => (

<Observer {...observerProps} style={{ backgroundColor: colors.red }} />

);

const Yellow = () => (

<Observer {...observerProps} style={{ backgroundColor: colors.yellow }} />

);

const Blue = () => (

<Observer {...observerProps} style={{ backgroundColor: colors.blue }} />

);

const Green = () => (

<Observer {...observerProps} style={{ backgroundColor: colors.green }} />

);

export default function App() {

return (

<Router>

<nav>

<Link to="/red">Red</Link>

<Link to="/yellow">Yellow</Link>

<Link to="/blue">Blue</Link>

<Link to="/green">Green</Link>

</nav>

<Switch>

<Route path="/red" component={Red} />

<Route path="/yellow" component={Yellow} />

<Route path="/blue" component={Blue} />

<Route path="/green" component={Green} />

</Switch>

</Router>

);

}

In this example, we define several components for different colors, each wrapped in an Observer. The Link component facilitates navigation between routes, allowing us to observe animations as each color box mounts or unmounts.

The following video showcases how to create easy animations in React:

Conclusion

Utilizing the ObserverGroup component with react-tweenful enables you to implement smooth transitions for groups of elements, enhancing the user experience in your React applications. Additionally, it integrates well with React Router, making it a versatile tool for animating both notifications and route changes.