Easy Example for ReactTransitionGroup in NodeJS

Getting started with animations in React

Sjors van Heuveln
Aug 26, 2017 · 1 min read

Just spend a full day on finding a good example for using the TransitionGroup Component from the ReactTransitionGroup library for doing animations in ReactJS. I’m new to React and Node and I really needed an example that fits with my setup, otherwise I just get too confused and frustrated (if you know what I mean). Finally, I found a YouTube video that portrayed exactly what I wanted, but lacked the proper code:

In search for the code, mister Chang Wang created an easy example, but it wasn’t fit for Node: https://medium.com/appifycanada/animations-with-reacttransitiongroup-4972ad7da286. So I converted his example to a Node compatible version.
Don’t forget to install the following stuff first. GSAP is required for the TweenMax functionality.

npm install react-transition-group --save;
npm install gsap --save;

Below is the React code. If you have any questions, please let me know. I hope this will give you enough to get you going and create something fit for your project. Happy Coding!

)
Sjors van Heuveln

Written by

Surfer, Entrepreneur and Developer, Founder @ wiscatbijles.nl

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade