Create Smooth, Performant Transitions with React Transition Group v2

[zacjones93]

Primary Tags

React, CSS

https://egghead.io/courses/create-smooth-performant-transitions-with-react-transition-group-v2

In this course, we are going to use the fantastic React Transition Group library to write seamless, performant, beautiful transitions of elements in and out of the DOM.

With React Transition Group, you have the power of transitioning React components in and out of the DOM, depending on the state they are tied to, with no weird hacks. Without React Transition Group, you may find yourself using a lot of display: none in your CSS, along with some pretty nasty setTimeout hacks. But with it, you will find you can write your transition elements with a neat, declarative API, and no hacks in sight.

With v1 in production for some time, an overhaul to the API has arrived and culminated in v2, which yields a new API that is a pleasure to use.

I look forward to showing you all the features of React Transition Group in depth so that you can turn features of your React app from dull and boring to slick and seamless.

[MaggieAppleton]

Main Tech – React & CSS

Course link:

https://egghead.io/courses/create-smooth-performant-transitions-with-react-transition-group-v2

Course Description:

In this course, we are going to use the fantastic React Transition Group library to write seamless, performant, beautiful transitions of elements in and out of the DOM. With React Transition Group, you have the power of transitioning React components in and out of the DOM, depending on the state they are tied to, with no weird hacks. Without React Transition Group, you may find yourself using a lot of display: none in your CSS, along with some pretty nasty setTimeout hacks. But with it, you will find you can write your transition elements with a neat, declarative API, and no hacks in sight. With v1 in production for some time, an overhaul to the API has arrived and culminated in v2, which yields a new API that is a pleasure to use. I look forward to showing you all the features of React Transition Group in depth so that you can turn features of your React app from dull and boring to slick and seamless.

---

Previous React & CSS Illustrations

Keywords:

• Transitions, movement, animation, frame of the DOM, in and out, easing, path of movement, smooth, flow.

---

Ideas to Start With:

• A browser frame with react elements entering and exiting on either side. Can be abstract shapes, arrows. Show animation and sense of movement with trail lines / transparency.