React Banner Ad

‼️ This project is archived and no longer maintained.

A thought experiment to explore CSS animations in React and React hooks.

Demo https://react-animation.onrender.com

Purpose

In the real world, there really isn't any reason to build a simple 300x600 banner ad using React; it can easily be done with raw CSS and JavaScript in many different ways, such as by doing a bunch of setTimeouts that add classes to HTML elements. However, I thought it would be an interesting thought experiment to make a banner ad using React to learn how to do animations in that environment and also learn about hooks along the way.

All styling in this project was done using CSS and zero image assets were used. All animations were done in CSS as well. No JavaScript was used to position, animate, or otherwise manipulate the styling of the components. CSS is very powerful! (And pseudo elements are magical ✨)

Styling Dependencies

In this project, I used the React Transition Group and Emotion libraries to animate and style my components. (Emotion in particular was chosen because it is what we use at The New York Times, and a secondary goal of this project was to see how I could incorporate animations into our app.)

Setup

This was scaffolded with create-react-app, so simply

1. Clone and npm install.
2. npm start.