Introducing the RoundPropsPlugin
This won't be exactly brain surgery after everything we've been through. In this lecture we'll take a peek at the RoundPropsPlugin (this could've been really useful in chapter 1). I suggest you return back to chapter 1 and try figure out what needs to change if you use this plugin instead. As always, paste in the comments section so we can see what you've been up to.
Video Transcript
00:00In chapter 1, before we worked with any plugin, and before we even seen the CSS plugin, we were animating something that we needed to round its property.
00:09Although we could do it ourselves, it's not that hard, we've seen how to do it ourselves, we could use a plugin for that.
00:15So without further ado, I give you the round plugin.
00:18Talk about one more really simple plugin, let's jump into it, see it really quickly.
00:23So I'm going to go ahead into my green saw because I want to integrate another plugin, and I'm going to integrate the round props plugin.
00:29So to do that, I'm just going to find that, let me just find the bottom one, which is so hard to select.
00:37Oh my god, this isn't crazy.
00:41Alright, I know it's round props, I'm just going to take that and I'll just copy the name as I go.
00:46Alright, so we're going to our file, I'm going to go up to the top here, add that plugin, so I'm just going to make sure that I have that.
00:53And again, obviously, and by the way, I don't know if obviously, but in this type of scenario where we have so many plugins running at the same time,
01:01it's not a good idea really to run it through a server because you're hitting a server a lot of times.
01:07Your better option is to download the files, clump them all together into one file, and then load up only one file.
01:13That is if you're not using between max at this stage.
01:17So I'm going to go ahead and save this, and now that we have the round props plugin connected,
01:22all that's left for me to do, and I don't know if you remember from chapter one, I believe it was,
01:27before we had any, when we were tweening, we were tweening only without any CSS and then we created this text animation.
01:36That's where we could have used the round props so perfectly.
01:40But if I find here one of the attributes, for example, when I'm animating here, my CX from position 10,
01:46what if I wanted to make sure that I'm only sending complete pixels,
01:51and I didn't want to move it in the dot of a pixel because I just don't want to.
01:56In that scenario, I could literally just after I added that plugin, I could just add one more property,
02:02and that property is going to be round props.
02:05And round props I'm going to send into the string, and there I'm going to define the properties that I want to round up.
02:12Now, by the way, I could add here also a few by adding a comma like you would with an array
02:17and adding whatever properties I want to be rounded up, making sure that I won't have in-between values
02:23that would always round up to the nearest pixel.
02:26So if I save this and run my application one more time, we're not going to see a major difference
02:30and probably not going to see a difference at all.
02:32This is really, really helpful, and mainly in scenarios where you start seeing a little bit of jaggedy jiggity stuff,
02:38or in a scenario where, for example, our first animation where we were typing something in.
02:43But we're not going to do that over again.
02:45What I recommend you do is go open up Chapter 1 again now that you know how to work with this plugin
02:50and redo it, but this time round, instead of rounding it yourself, use the plugin
02:55and see if you think it's more beneficial.
02:58All right, we are done with this lecture. See you in the next one.