• code pin
• motion project
• head room
• mojo module
• declarative call
• curve editor

Welcome back that same old place.

It's with another have all changed since you hung around but those dreams everything, and they turned around.

Hey, what's going on y'all?

Alright, welcome back to the second break session of the second cipher of the day.

Okay.

Yeah, just doing some laundry working on this side project thing that I have got going on.

It's a It's like a it's an is it add on to another project?

So looking to maybe traveling soon, and so I have this site called doing stuff that I am doing stuff in and it's also I was shortener.

That's like Dwayne my name dot in.

So I can say like doing stuff in Miami or whatever doing stuff in / Orlando, and it just kind of like be able to redirect and like, Dwayne in Miami Dwayne in Orlando and it just, it's like a map, and I am taking pictures and different things, two places.

I am kind of chronicling my journey.

And, so I had a previous job where I got to travel a lot and I would take like pictures and things, but they like all over the place.

They're like in Google folders and all type of stuff.

So I want to have like a site, and so I have been I got it working.

Got a couple of things in there, but now I am creating a way to actually like from Phone take a picture and upload it.

So it's just a lot easier more seamless, but I want when working on is adding a live component cause I want to like live stream from places.

So I have been really into live streaming recently.

So yeah.

All right.

So neither here, nor there.

Let us talk about some other stuff that I found.

Kind of interesting that actually haven't got a chance to play around with it, but look cool.

It came across the today, and I was like, I could see some use for this, you know, because a lot of times as I am developing stuff.

I am just putting the data on the page, you know, I mean, like there's no stuff really moving around or anything like no fancy animations or anything.

It's just I try to get things as quick as possible to the page, but there're times when you kind of like want to like show emphasis on things or whatever, you know saying maybe like when you click something like a little thing marks or whatever, you know, so he complete a task or what have you?

And so came across this like JavaScript library, and I am going to post a link to it so that you will be able to check it out with the record.

And so you can go right to it.

And even like the homepage is kind of like, wow, that's pretty cool.

And so, let me share my screen.

I don't think there's any audio, but I will share audio just in case.

All righty.

Again, I haven't really done much with that kind of looked at the, like, the documentation a little bit and was cool.

I like about the documents.

You have like, examples and stuff and then like codepen, and if you could run it on code pin, I mean, cuz Copan like the resources that like, you can Use is pretty tight.

And so it because just like HTML CSS, ins, like some JavaScript stuff like within a container.

And so for it to have things, they're pretty cool.

So you can see how it's Yeah, so this is so it's called Mo dot JS.

So the website is Mo JS.

M OJ s dot GitHub dot IO, right?

And so the running this off of the is an open source thing, but the actual like opening animation is kind of cool like that.

Wow, as JavaScript, that's kind of well, so that's it from a scroll down a little bit so you can see it's playing in this player here.

And then progress bounce.

I know that is, oh, so you're able to show just where you want it to play.

That's pretty cool.

So, the whole thing, CI.

Okay, it kind of comes in our nowhere and this one is, it's right there.

That's pretty cool.

Oh, wait, wait.

What?

Hold on.

What is this doing?

This is kind of cool.

I mean.

Oh, I think it.

Oh, it's oh We're going to go by quicker.

That's pretty cool.

All right.

It's not that, that's okay.

That's pretty cool.

So now has like a getting started.

So I will take you to, like, the getting started page.

So let us talk about.

So it says it's fast, silky smooth animations and effects for staggering user experiences.

And that is pretty slow.

Key smooth retina, ready.

So screen density, independent effects.

Look good on any device.

That's always good.

So, it's like it's responsive.

Simple.

So again, simple as like relative.

So simple, declarative apis to master your motion project with ease and then modular.

So custom build for the current projects needs, bye-bye, large file, size overhead.

So that's another thing like why don't really like doing like a lot of animations because sometimes they add that overhead and where you know, you know, like I would rather push The most important data then have it showing a screen then have it like flying into the screen, kind of thing.

You know, I am saying like I want the data there as quick as possible with as little as head room that you need your I mean like overhead.

Well this over so over 1580 unit test and wow.

Nice, it's open source.

Cool.

Very nice.

So let us look at get started.

So that takes us to the tutorials and is there.

Okay, so there're tutorials overview.

Let us move that says, okay.

So it's just like the thing.

They're cool.

And I guess service that's server-side rendering usage with react.

Okay.

The reactors or science center, right?

All right.

Cool.

So if you are a researcher needs to be written.

So hey, if you're looking for something open source, you can help them with their apis overview.

Let us see.

Okay, so let us go beginning started.

So, you can install it or end.

So you can do npm or yarn and then you import it.

Cool, or you can pull it from like a CDN.

All right, then to create your.

So here it is.

Okay.

So this is the code to create it.

And so of course, it's like you get a reference.

So you create a new Mo j s dot shape.

So you're going to create an instance of it.

And then, so I guess the parents is the guess where the I guess your div.

What have you?

And then you give it to this shape Circle, you fill it with this color?

You know why?

There's two of these.

Oh, cuz it's changing colors.

Oh, wow, and then the radius also, there's like, so I guess it's from this to this and the radius.

So the smaller to the larger, how long it takes?

I guess if it goes back and forth, like a yo-yo, instead of like a loop, but it goes back and forth.

Okay, and then is show start and getting notifications.

Easing.

Okay.

Nice.

And then repeat once and then you play it to start it.

Pretty cool.

This show the code or this is done.

Oh, that's just for the player, you know, okay, give me a sec.

I don't know what is happening with these notifications.

Somebody blowing me up.

What is it?

Oh, what?

I do.

Okay.

That's I don't know why people are sending me.

Text message about random things.

Alright, and then or maybe loading an anime.

So wait, what's this?

Create your animations?

What about a bouncy Circle?

Well, maybe loading or maybe a loading animation.

Okay, so okay.

Oh, so then there's like interest.

So it's like you loaded and then you kind of tell it what to do.

Interesting, so there's like you can do like dot then so you can I chain things.

Because you have a rotate here, then you have another rotate.

So what have you just keep doing like that?

Then you can add something else.

That is pretty cool.

Go creative.

So yeah, usage with server-side rendering, which is kind of interesting.

So, note that this is a client-side library and is not meant to be run on a server.

So, if you're using, so, if you're using a library like next JS, Gatsby knocks or angular Universal, make sure not to run your Mo J's code on.

The server makes sense just on the client side, how to do that differs from library, you are using React based libraries.

You can use the use affect hook or dynamic import.

Okay?

For angle Universal, you can use guards.

Last the FI you can use view with nuts.

Jay.

Yes, you will find more over there.

There's a mountain hook.

Okay, that's cool.

So, yeah, so if you're so, for example, like, I like to use Astro a lot, right?

So if I were to use this Astro, makes it pretty like straightforward if you want something, just to be on the client side, only you just say, In the tag for your component, you just add client: only.

So it won't try to like service.

I would like you won't try to render it.

It would just pull it from the thing.

That is pretty cool.

Alright, so some more stuff now, this is in shape and swirl.

That sounds funny shape and shape swirl.

All right, hit computer.

I want a pink outline polygon right in the middle of the screen.

Shape is a special Mojo module that bootstraps visual effects.

The idea behind shapes is simpler simple and neat.

You can have an animatable.

I don't know this word and are, you know if I said it rights, and animatable, whatever shape in any part of the screen or any HTML elements with one declarative call?

Cool.

And then so we have stuff like burst and stagger.

So I guess you will have to do that.

And so that's what we saw before the shape.

Say the shape Circle and show I guess show at start true.

Cool, so does that?

Yes, the shape it to be visible even before any animation starts?

This is pretty cool.

And then you can shape it.

However, you want.

Okay.

Okay, so color The Fill is transparent.

So that's why it has the hole in the center.

This is pretty cool.

All right, someone's infill and like we wanted to be X Y probably radius so you can make it like an ellipse.

Cool.

It's, and then they have a polygon so you can do so, so yeah, so they have Circle wrecked or so and then, huh?

Radius is R.

Okay.

So, so it gets okay.

Radius of us.

Okay, rectangle.

And then if you want to make a shape, so I guess, since this is X here, going, horizontally.

That's why it's thinner.

And then why is the capsule that makes a triangle?

Huh?

It is interesting.

Interesting.

And then so it's pretty clear with so you can create zigzags and curved shape.

So the shape is a zigzag curved cross.

So I guess those are things that are just in there and it does it for you.

Wow.

Okay.

I am at a deep dive into this Morris, pretty cool.

And then there's a Delta thing.

So, I want to go to Those are some really cool animations that I saw before, like what you can do with it.

Oh, wow, so like things can change from okay.

That's rotating.

And then that all that's going like thinner and Trina colors.

Oh wow.

Okay.

Oh, is that the is Yo-Yo, or in the repeat?

So, that's how many times it does it in a thing?

Okay.

So if you want to do it more times within the time frame, you put the repeat, and we will do it within like 10 times with that.

800, but feels like one.

I like how you can like change it.

Update the code.

See over the whole span.

It does that animation.

Once that is kind of cool.

That is pretty cool.

All right, but neither in there.

So yeah, there's a lot of stuff you can do here as you can see, and so I think it's under you, I use cases.

So yeah, so there's like this bubble close button.

So you have the, so I like I said, they have this running in codepen.

So you see that like That is pretty so that close button like we close, it will show that is, that's kind of cool.

What's this one?

Oh, and then this one had like even fancier like bubbles.

So yes, if you kind of like want to spice up your animations.

Look at that one.

That's pretty cool.

And it's all done with like gets cold.

Like it does all the CSS and stuff for you.

Wow.

Wow.

Wow, what was that?

And I think but we run and we run.

So like if you ever so also like you click something, no, change to a whole another color.

That is kind of cool.

See, I am going to play with some of the stuff here is kind of neat.

It's a loading thing.

I am not sure what that's doing.

But yeah, those one word like you could click, they go, like, you can click around and do it.

That is kind of neat.

And, My bad news.

I am just kind of here playing around with this.

This is pretty cool.

Let me see here.

Taking out quips here.

So this one.

Oh, wow, so I guess so.

Yeah, so you can just have an amazing.

You can make it all the also interactive which is you know, like if you click somewhere on the page if we did before and then micro interactions, so if you ever have like a web so that they have this option.

So you have like your menu BC you hover over it.

It's pretty cool.

Nice.

That's pretty cool.

Alright, um.

Yeah, so there's a lot of stuff you can do here and love-hate.

Modal look at this.

So if you ever look for, you know, to have like little tiny animations.

Oh, wow.

I don't know what that was.

That was.

Wow.

Whoo, okay.

It's all this stuff is like, fascinating to me.

Like I don't have like the stock.

Look at that.

Wow.

Wow.

All right, we're over.

So I am going to let you out but if you want to check it out, this is Mo, Jas.

And it seems really, really cool.

So they this stuff looks interesting to you.

And you always felt like, you know try and do cool CSS animations with kind of Beyond you but you're more until I can react.

Well, yeah, reactor or JavaScript you can do this, and then they have the tools.

Okay, so that would they have a player?

So you control the animations that it's the curve editor for easing and stuff.

And I like a timeline editor for interactive HTML so you can kind of like set it along.

That's pretty cool, set of tools to help you out with it.

That is pretty cool.

And then the API shows all the stuff that was kind of in this tutorial looks like That is.

Wow.

That's a lot of cool stuff here.

Okay, very nice.

Very nice.

Like I said, there's a bunch of examples and you can like play around the examples and change things.

That's what I like.

That's pretty cool.

All right.

Nice, very nice.

So big shout outs to uh, Moji.

And the person who created that, I think it was in a Twitter, but I have lost since lost the Twitter account, the person's name.

I think it began with an L.

Yes, Lego mushroom.

So, shall some Lego Mushroom.

Probably, I guess spearheading this is from like, 2016.

So, it's been put in some work in, and then they have a link to the GitHub, so you can always check it out for yourself.

So yeah, this is kind of cool.

So I send you all back to work.

So I might say, is that the thing where I know this is available now, so I might like, as I am creating projects like it'd be nice if I had like a little like thing to draw attention to this thing that I want people to know about.

And have like a little animation or something, or maybe like, if they're, if I am stepping through some something, through some steps and stepping somebody threw like a form or something, like go here, and then you had a little thing, like, oh, go here, then go here.

I am saying about all sorts of random things, but that is pretty cool.

So one of those I am sure there's plenty other stuff similar to it.

But this is the first time I have seen something like this like that whereas declaratively creating the animations, you just tell it what it wants and it just does it.

Which is pretty cool and it says it's fast, so I will probably play around with it and see how fast it actually.

If it slows down any projects and things.

Because again, what about like responsiveness and getting the information to people neither here nor there, but I think it's cool.

Let me know if you think it's cool.

And if you build anything with overview, have build anything with it, let me know if you know any other thing else that does something similar.

Please let me know.

All right.

So let me ask top screen share because I am going to get you all back to work.

And yeah, so this track is new Jabez.

Featuring a Pawnee be and is called.

Thank you because I want to thank you all again for hanging out.

So here we go.

See y'all so 15 minutes after the hour and then I will be the final break session.

So if you want it comes up and talk about anything you found interesting.

Please sign up for show and tell.

And I will get you on here.

Otherwise, we're gonna take a look at an artist website and listen to music.

Maybe watch some videos.

Alright, so again a thanks for hanging out.

This is new.

Job is featuring a Pawnee be, thank you.

All right.

Talk to you later.

See you.