Coding

ReactJS & CSS Animations Basics – #2 CSS Animation Basics

  • 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