Original subtitles

In this course section,

we are going to dive into animating

react apps and components.

We are going to learn how to move from static styles

and components to animate it thousand components

with smooth transitions and simply animations that look good

and lead to a better user experience.

For this we're going to explore CSS, transitions,

and animations

and we'll see when those are enough

and why they sometimes are not enough.

Why just CSS, animations

sometimes don't do the trick.

And then therefore, we're also going to dive

into some third party libraries

which we can use one specific third party library

to be precise that helps us

with providing animations to react components.

That's what we're going to do in this course module.

Now for this course module

I prepared a demo project and this demo project

actually uses class-based components instead

of functional components and hooks simply

because I created this project here already

for the older version of this course

which used class-based components only

but it should be fairly easy to get

into this project as well.

And definitely check out the course section

in this course on class-based components.

If you're struggling to understand

this attached to demo project.

In the end, it is a regular react project though

with some react components.

And specifically in this project

we got three react components

a backdrop, a list and a modal component.

And if we install all the dependencies in this project

with NPM install and we then start the development server

then we see a site

a website where we always have to modal overlay.

And if we then go back to our code and the app component

and comment out this modal and backdrop

and we then save this and then go back

to our site, then we see this demo application

where we got a list where we can add list items like this.

And you see the code that runs behind the scenes

for adding the list items in the list component.

And throughout this course section, we now want to make sure

that we animate both the modal, the appearance

and disappearance of the modal, and also the list here.

And for this we're actually, first of all, going to start

with a non animation topic, we want to make sure

that this modal is showing up conditionally.

So let's start with that.