- 00:00:01 animations are extremely important you
- 00:00:03 want to have them in your application
- 00:00:04 because they allow your user to know
- 00:00:07 what he just did and where he is in your
- 00:00:09 application so it's more than a little
- 00:00:10 bonus in this video and some other
- 00:00:13 videos in this series here I want to
- 00:00:16 show you how to add some animations some
- 00:00:18 basic animations to your react chase
- 00:00:21 application now before we dive deeper
- 00:00:24 into these specific tools react offers
- 00:00:26 you it's important to understand how CSS
- 00:00:29 animations work without react so without
- 00:00:33 using any react specific tools and this
- 00:00:35 video we're going to build this little
- 00:00:37 application using the material CSS
- 00:00:39 framework with this card which we can
- 00:00:41 slip or slide so here I'm not using the
- 00:00:48 transition element or attribute I used
- 00:00:51 in the last video but I'm using D built
- 00:00:54 in CSS animate attribute and D CSS
- 00:00:58 animations let's have a look how these
- 00:01:00 work in this video I'm back in my very
- 00:01:03 basic react application it's pretty much
- 00:01:06 the same as before I still have my card
- 00:01:08 and on this card I have my two buttons
- 00:01:10 flip and slide now I don't have any
- 00:01:13 Styles applied to discard besides GECs
- 00:01:16 as frameworks style so the material
- 00:01:18 Styles here I do have some event
- 00:01:22 listeners when I click on the button
- 00:01:23 where I simply change my state a bit but
- 00:01:26 all I do have in my state are the slide
- 00:01:29 and flip properties which are both set
- 00:01:32 to false initially and then can be
- 00:01:34 switched to true or false when I click
- 00:01:37 the button to do animation but no
- 00:01:40 animation is triggered right now this is
- 00:01:42 the part we have to do now since this is
- 00:01:46 all setup let's start by understanding
- 00:01:49 how CSS animations work the difference
- 00:01:53 two transitions which we saw in the last
- 00:01:55 video is that now we don't tell CSS
- 00:01:58 please do style change over a specific
- 00:02:02 time period but instead we tell CSS hey
- 00:02:06 we get this specific animation please
- 00:02:09 execute this animation that's a clear
- 00:02:11 difference we're not changing a style
- 00:02:14 and
- 00:02:14 tailored to do that overtime we're
- 00:02:16 explicitly telling it please do that
- 00:02:18 animation and the animation we are
- 00:02:21 setting up gives us more flexiblity than
- 00:02:24 the transition element or attribute
- 00:02:26 views before not only that it also gives
- 00:02:29 us some opportunities or possibilities
- 00:02:31 we didn't have before so let's see how
- 00:02:33 to set up such animation such as CSS
- 00:02:36 animation I'll start with the slide
- 00:02:39 animation and I want to start or set us
- 00:02:42 up in the index.html file where I set up
- 00:02:45 some style tags here but no Styles in
- 00:02:47 between I'm just doing this year do not
- 00:02:49 pollute my main dodge chairs file with
- 00:02:52 styles so as I want to start with the
- 00:02:55 slide animation the question is how do
- 00:02:57 we tell CSS that we want to animate a
- 00:03:02 specific element well we do that by
- 00:03:05 simply adding a class which has the
- 00:03:07 animation style attached to it
- 00:03:10 so here I'll click create a new class
- 00:03:12 called slide and all this class does is
- 00:03:16 it attaches the animation element or
- 00:03:19 attribute here now be aware you could
- 00:03:22 add any normal CSS style you want
- 00:03:24 this is a normal CSS class here so you
- 00:03:27 could set the font size whatever you
- 00:03:29 like you're not limited to attaching
- 00:03:30 animation here the animation I want you
- 00:03:34 do here is let's say slide and we will
- 00:03:38 have to create it on our own because
- 00:03:39 there is no built in slide animation
- 00:03:43 then you can also add some other
- 00:03:45 attributes here this could be for
- 00:03:49 example the length of this animation you
- 00:03:51 can dynamically change this so let's say
- 00:03:54 you want to slide over one second then
- 00:03:56 the easing function and here let's say
- 00:03:59 we want you ease in and then you can
- 00:04:02 also specify the position this element
- 00:04:06 should have when the trail animation
- 00:04:07 finishes so with a transition in the
- 00:04:11 last video you always had the well new
- 00:04:15 value as a final result so if we change
- 00:04:17 the opacity and simply set up a
- 00:04:20 transition of one second then it would
- 00:04:22 slowly fade in or fade out but then it
- 00:04:24 would keep this status it would stay
- 00:04:26 faded in or faded
- 00:04:27 now with the animation the default is to
- 00:04:30 revert it so if we slide element then
- 00:04:33 after finishing yeah the animation it
- 00:04:35 will jump back that could be to desire
- 00:04:38 behavior but it could also not be so if
- 00:04:41 you want to keep the final state and say
- 00:04:44 the element should stay where I animated
- 00:04:46 it to then you have to add four words
- 00:04:49 here this simply tells CSS keep the
- 00:04:52 final animation state alternative values
- 00:04:55 would be revert or alternate which
- 00:04:58 allows you to replay the animation then
- 00:05:00 you could also specify how often you
- 00:05:02 want to do this like alternate to what
- 00:05:04 tell CSS do the animation twice and
- 00:05:08 simply alternate so slide to the right
- 00:05:11 slide to the left finished that would be
- 00:05:14 another choice
- 00:05:15 now here I'll choose four words to stick
- 00:05:17 to the final result if you want to learn
- 00:05:20 more about CSS animations I strongly
- 00:05:23 check out one of the many tutorials you
- 00:05:25 can find on the web which dives deeper
- 00:05:27 into this and the attributes you can set
- 00:05:30 up here I only want to give a basic
- 00:05:32 introduction here so that we're able to
- 00:05:34 use them with react.js later on now the
- 00:05:40 issue we have here is this slide
- 00:05:42 animation here doesn't exist yet so we
- 00:05:45 have to create it specifically we will
- 00:05:48 create a couple of key frames which are
- 00:05:51 individual points during the animation
- 00:05:53 where we can specifically tell CSS which
- 00:05:57 attribute should have which value at
- 00:05:59 which point of time
- 00:06:01 so that is really flexible and why the
- 00:06:03 animation attribute here gives us a
- 00:06:06 broader flexibility than the transition
- 00:06:08 element we used in the last video so
- 00:06:11 here I will add new keyframes and I do
- 00:06:14 this with at keyframes this is normal
- 00:06:17 CSS code and here I'll name it slides
- 00:06:20 and sister name I chose above here in my
- 00:06:23 slide class for the animation now to set
- 00:06:27 up keyframes we got a couple of options
- 00:06:29 the easiest way is to set up from and
- 00:06:32 then two like this and as you might
- 00:06:36 imagine you can set up these styles you
- 00:06:39 want to start
- 00:06:40 and he from part and then the stars you
- 00:06:42 want to have at the end a tattoo part
- 00:06:44 and you can animate multiple styles you
- 00:06:47 can even be more specific than that you
- 00:06:49 can work with percentages so you could
- 00:06:52 say 0% which is the same as from so at
- 00:06:55 the start and then you could add 50%
- 00:06:58 which is in the middle and then of
- 00:07:01 course you could add 100% which is in at
- 00:07:03 the end and you can also add any other
- 00:07:05 percentages in between not just these
- 00:07:07 free so here I'll stick to 0 and 100%
- 00:07:11 even though that's the same as from and
- 00:07:13 2 and then since you want to slide here
- 00:07:16 what I want to do is I want to transform
- 00:07:18 so does the default transform attribute
- 00:07:20 normal CSS attribute here and I want you
- 00:07:23 to translate X which means move it on
- 00:07:26 the x axis not y axis x axis and I want
- 00:07:32 to start at 0 percent which is the
- 00:07:34 position the element by default has so
- 00:07:37 it means start at the position the
- 00:07:39 element has anyways but then I want to
- 00:07:42 animate it to another position which is
- 00:07:45 why I add transform translate X and then
- 00:07:49 let's say 80 pixels which we'll move it
- 00:07:53 to the right 80 pixels you could of
- 00:07:55 course also use 100 percent here to move
- 00:07:58 it by the width of the element or 1000
- 00:08:01 pixels or even more whatever you like so
- 00:08:04 choose the width you want to choose here
- 00:08:07 this will be the distance it will slide
- 00:08:09 over with this we set up to slide
- 00:08:13 animation and any element which has the
- 00:08:15 slide class will now perform this
- 00:08:17 animation I can share this to you by
- 00:08:20 attaching the slide class to our card
- 00:08:23 here oops that's the card so let me add
- 00:08:26 slide here and if we now reload the page
- 00:08:29 you see it slide over that's nice but we
- 00:08:33 want you to trigger this when clicking
- 00:08:35 this button and not when loading the
- 00:08:37 page well maybe you want to do this when
- 00:08:39 loading the page but I don't want to do
- 00:08:40 it here so I want you to die Namek li
- 00:08:43 add this class here and not always so I
- 00:08:47 want to add this class when this slide
- 00:08:50 button here was clicked which will then
- 00:08:52 set the
- 00:08:53 slide property in our states – true so I
- 00:08:56 can use the slide property in the state
- 00:08:58 to determine if we should slide or not
- 00:09:00 if you should add this class or not
- 00:09:02 therefore I will go to this class name
- 00:09:05 here and change it a bit I will wrap it
- 00:09:09 in curly braces to take control wire
- 00:09:13 react.js and then I want to add my
- 00:09:18 conditional classes to this string the
- 00:09:21 first thing I'll do is I'll add a white
- 00:09:24 space at the end otherwise I would
- 00:09:26 attach my class and I am right next to
- 00:09:28 this class name and build a new class
- 00:09:31 name which doesn't exist so make sure to
- 00:09:33 have a white space here then I'll add a
- 00:09:36 plus to concatenate something to that
- 00:09:38 string and the thing I want to
- 00:09:40 concatenate here is simply if this state
- 00:09:44 slide this is just check if that is true
- 00:09:47 then I want to attach the slide class
- 00:09:49 otherwise attach nothing so I'm using
- 00:09:53 this ternary expression here to check if
- 00:09:56 slider set to true if yes I will add
- 00:09:58 slide to that string if no I will add
- 00:10:01 nothing to it string so the slide class
- 00:10:03 will only be added if I click this
- 00:10:05 button if I save this and go back you
- 00:10:08 see up on reloading it's not sliding but
- 00:10:11 once I click this button it does slide
- 00:10:12 notice that it doesn't slide back if I
- 00:10:15 click here since I haven't implemented
- 00:10:16 this functionality but you see it slides
- 00:10:19 over when I click the button awesome now
- 00:10:22 I want to achieve the same for the flip
- 00:10:24 button here so in order to view this I
- 00:10:27 will go back to the index.html file and
- 00:10:30 I need to add a new animation here the
- 00:10:33 flip animation so here I'll first add a
- 00:10:36 new class and I'll name it flip of
- 00:10:37 course these names are totally up to you
- 00:10:39 I'll again add the animation attribute
- 00:10:42 and I will name this animation flip also
- 00:10:46 this name is up to you let's flip it
- 00:10:48 over to seconds here and ease it out and
- 00:10:53 now let's say alternate twice to flip it
- 00:10:56 over and flip it back notice the
- 00:10:58 difference to reword is that with reword
- 00:11:01 it would snap back
- 00:11:03 whereas with alternate – it will
- 00:11:05 smoothly and
- 00:11:07 made so let's build D keyframes or set
- 00:11:10 up the keyframes for this flip animation
- 00:11:14 here I will all choose 0% and 100% even
- 00:11:18 though you could use from and 2 of
- 00:11:21 course as before and when flipping I
- 00:11:23 also want to transform the element but
- 00:11:26 now I won't transform the position I'm
- 00:11:29 not moving it on the X or Y axis instead
- 00:11:32 I will rotate it and here we can also
- 00:11:35 rotate X which means rotate over the x
- 00:11:40 axis which means towards you or away
- 00:11:43 from you or rotate Y which will rotate
- 00:11:47 it like this so X Y awesome they're
- 00:11:52 really cool you can see me here
- 00:11:54 otherwise this would have been
- 00:11:55 impossible
- 00:11:55 so routed Y and then here you pass the
- 00:11:58 degrees by what you want to rotate well
- 00:12:01 I want to rotate by zero degrees
- 00:12:03 initially because I want to keep it in
- 00:12:05 the position has but once we reach 100%
- 00:12:09 so at the end of the animation I want to
- 00:12:12 rotate it to 180 degree so that we have
- 00:12:15 flipped it now with that we set up the
- 00:12:18 flip animation I can now do the same as
- 00:12:21 with the slide animation I want to
- 00:12:24 conditionally attach this class so I'm
- 00:12:26 copying this pasting it in here but now
- 00:12:29 instead of slide I'll use the flip
- 00:12:32 property and attach the flip class also
- 00:12:36 noticed and with when clicking slide
- 00:12:38 I set flip to false and when clicking
- 00:12:40 flip I set slide to false so then we can
- 00:12:43 wreak lick the other animation if I save
- 00:12:47 this app should already have been loaded
- 00:12:50 I can click flip I can now wait it flips
- 00:12:54 back I can click this again but this
- 00:12:58 doesn't do anything because the flip
- 00:12:59 class already is applied I have to slide
- 00:13:02 first which will remove this of course
- 00:13:04 you can take this as a challenge and
- 00:13:06 change this so this is the animation I
- 00:13:10 got here and with that you got the
- 00:13:13 basics about how transitions and
- 00:13:15 animations work if you need even further
- 00:13:18 basics definitely check
- 00:13:20 some additional tutorials on that I'll
- 00:13:22 also include some links in the video
- 00:13:24 description which would help you with
- 00:13:25 that
- 00:13:26 with that let's move on and learn about
- 00:13:28 some reaction specifc tools which
