Hey, everyone, and welcome back.
Last time we talked about just the different types of properties that famous smart enemy actually supports,
that being scale, position, capacity, rotation.
And Phil, now I'm going to show you a couple of different prototype examples of that actually being
used, I guess you could say in real life examples.
Let me show you the different types of ways you can basically use smart enemy.
So over here we have a little transition built.
And the goal here is to when you click on this card, it will show this option and then we can click
that to delete it.
And then this portion will kind of enemy upwards.
Think about if you had maybe like a mailbox and you wanted to delete one of your mail items or like
one of those cards.
And once you do that, the rest of the cards kind of just push upwards.
That's essentially what we're building here right now.
So the way to do that is you need to create three different screens for this type of animation.
That's what I've gone ahead and done.
And if we just click on our prototype time that we have here, so we've already done that.
I'm just going to click the screen just to show you what I've done.
So I've selected this object.
So this called Rectangle 17 over here.
And it's going to match this one here.
That's also called rectangle 17.
So naming conventions are very important with smart made because if this was named something else,
nothing would necessarily happen.
So we wouldn't get like a fill animation when that changes and we wouldn't also get it to disappear.
It removes itself from this screen as well.
So what I've done here is I've just taken this prototype node and connected it to this screen and I've
selected on top navigate to this screen.
So it's just called transition.
I know poor naming by it's just for the sake of an example and out of my animation menu, you can select
instant, you can select dissolve.
But what we want to do is we want to select smart animate and that's what we've done.
So we have smart animation selected over here and you can select the easy thing you can do.
EASO is and you can do linear.
I find linear looks kind of fake when we actually design animations and just different type of motion
in general.
Gravity also kind of applies.
You need to think about how things kind of gently kind of ease in or how gently they ease out.
And if things are way too linear, it kind of looks fake.
I like to kind of just apply one of these to it.
See what works for you.
I have is out in this instance, so that's what I have applied.
And then you can apply the animation duration over here.
So I have a set of five hundred milliseconds.
I feel like that's pretty good.
Just a time in general.
You don't want to have something that is too quick or something that's too slow.
I think the optimal speed is in around like two hundred to five hundred milliseconds stay within that
kind of limit for these types of animations.
Just don't want to keep your users waiting.
So let's see what this looks like.
Let's go right to our prototyp.
So we're just going to restart so I can see my hotspot right there and this is what's going to happen.
So we just have a film.
That's it.
So I've clicked this and that card has been highlighted in some way.
Let's jump back.
And the next animation is I'm going to click that same object and I'm going to attach it to this screen.
And now it's the same thing that I have here.
I have anime, smart anime as the animation.
I have the Ezo and I have five hundred milliseconds as my duration.
And this actually will not appear on this screen at all.
So I don't have a rectangle 17, as you can see.
So let's see what that all looks like together.
So I'm going to click.
To click it again.
And there you go, simple transition, if you provide enough content for something like this, it will
look really nice.
So if you actually create cards that have content, that's relative to what you're doing, not just
black box like I have, but that's just the easiest way to make this type of animation.
Now, let's go back.
Well, I'm going to do is I'm just going to drag this over here.
So I have this now another thing that you can do is instead of actually just using smart anime, you
can use a different type of animation like APUSH.
I mean, just click that, so let me show you what this looks like so you can have a push animation.
That's nice.
I mean, we're already thinking about screen transitions, but the problem is that you see the navigation
moves and everything kind of moves like even the title and that kind of stuff shouldn't necessarily
move in our instance.
I mean, the title may move in another application or.
Yeah, another example, but the navigation always stay the same.
So this is how we keep the navigation in its place or any other layers in their place.
So what I'm gonna do is I'm going to select that same animation I have that also selected here.
So I'm going to do is I'm just going to.
Let me remove this.
We're going to actually start from scratch.
So I'm going to actually just select this navigation item and I'm just going to attach it to the screen.
And I'm going to not click smart animate, but I'm going to click push.
I'm going to leave the the easing the same way, I'm going to leave the duration the same way, and
I can see a little kind of preview of what that animation looks like.
So I have my second screen is be coming in and pushing out screen.
If I wanted to.
I can add something similar like that where it just kind of overlays.
But let's just stick to push for now.
And you'll notice this option here.
That's a smart animation, matching layers.
And what that means is all the layers with the same name will be animated within this entire animation
that we're building out here.
So let me show you what that means, so I've clicked that so you can see animate layers with the same
name instead of using the transition above, instead of having the navigation being pushed out of the
frame, it will just animate to whatever is over here.
So let's see.
We have a couple of things going on.
So we have this.
It's called rectangle 15.
We have this ellipse for you.
And this is Ellipse four as well.
So we're going to see these different things animate.
And I even think I made this square over here the same as well.
So rectangle 16, rectangle 16.
So let's take a look at what that animation looks like after we just connect this third screen.
So I'm going to do the same thing.
We're just going to push it over there.
Let's match our ezine.
So I have five hundred milliseconds and on this one I'm going to have five hundred milliseconds.
Perfect.
And this will link back there and see now it's starting to just kind of grab the exact same animations
that I have applied earlier, so that makes things so easy.
I love that figure.
Does this.
This looks pretty complicated, but this is our flow.
Let's take a look at what it looks like.
So we're going to just go play that.
So we'll see right now we don't have a push in or push out, but we have things animating, you'll even
notice the little kind of micro interactions and we're going to get into that in more detail later.
But we can see that things are staying put where we want them.
So let's take another look.
And we're going to do here is we're actually going to rename this to
we'll call it square two and we'll call this circle three.
And what's caused everyone so that way we will actually get some sort of animation, so we'll just call
this square, we'll call this rounded square and we'll call this a circle.
And what we're going to do is we're going to name these and it's like them all.
I'm going to select command are to rename and I'm just going to say text and a number.
So that way they'll all be different and perfect.
Actually, that looks good.
And let's see what that animation looks like now.
So it should update within there.
Let's just restart.
So now we actually get actual, like animation of the screen changing.
While we keep our navigation the same.
Little animation we got here so we can actually go in and make these changes where we need to.
In terms of how that animation looks, I'm talking more so about the little details of how things slide
in in Slidell, we just want to keep that kind of stuff consistent because everything constantly sweeps
in from the right.
And when you're switching between navigation items, it gets a little confusing.
But that is essentially how you keep things in place while you are actually switching items on a screen.
So let's go even further down and we're going to kind of put these two examples together.
So we have a screen here.
Let's actually just delete the.
What do we have here?
So this is going to be OK.
That's that's good.
So that's just going to smart enemy.
And what we're going to have is we're going have the navigation stay in place, but we're going to have
that same kind of card and we're going to actually have a drag.
So what happens here is.
After a delay, so this is to mimic like a mailbox once again, so I'm going to proceed to the screen
and I've selected over here and I've selected after DeLay as my interaction.
So after one second or a thousand milliseconds, we're going to navigate to the screen.
So that means we're going to have an item pop up at the top.
And everything is going to animate down, so we have a selected and a smart animation.
So kind of like what's happening here and then what we're going to do is we are going to drag so on
drag to left, we're going to smart animals as well.
We are going to drag this delete button in from the right.
And once we do that.
After a delay, after we've deleted, we will remove this item and the rest of the cards will jump up.
So let's see what this all looks like together.
So I'm going to play.
So I'm going to do is click this.
There's our item, so if you can catch that, let's do one more time, so in a click and let's wait
for that delay and then items should pop up from the top.
There it is, and I can see that I can click this item.
And the great thing about stigma is it kind of notices when you're like 50 percent of the way.
So if I release over here, that delete will just slide.
If I release over here, they'll just go back so we can make some really nice micro interactions and
animations like this.
I'm just going to swipe it and then we're going to wait for the other delay, which will actually delete
them.
So I'm going to swipe delete.
And it's gone now we can go in and say, OK, that that took a little too long for our actual animation.
So let's go back.
So we have our SWIP and it should be much quicker.
So we can even go even further.
Let's do that again and let's go to two hundred milliseconds, because I think once you delete, something
should be pretty instantaneous.
So let's go through that animation.
Boom.
That's beautiful.
I'm going to delete that and it's gone, so, I mean, we could probably even trim that down a bit more,
but let's do it one more time and see what it looks like.
Nice slide, delete and everything kind of pushes its way back up.
So this is a great way for you to prototype different types of animations in the application that you
may have with smart enemy.
You don't even need to leave Fatemah.
You can just create pages of different types of interactions.
I mean, I wouldn't necessarily go ahead and create one massive prototype with all these different,
like animations and micro interactions.
Don't go ahead and do that.
It's going to take you so long to just put together.
And I mean, if you change one thing, then you may have to go back and rework.
What I typically do is if I have a like an interaction just like this, they want to showcase, I'll
make a new page for it and I'll just stick to this one page and I'll have whatever screens I need in
different variations of those screens in order for me to actually go ahead and present that to whoever
I'm presenting to, whether that be the product team alone, whether that be clients, keep things separate
to keep them clean.
Don't go making crazy animations like that.
In our next video, I'm going to show you how I applied Smart Enemy to that that other app I built over
here.
So I'll show you all the different things that I did to kind of put this together and make things look
really realistic in terms of motion and animation.
So stay tuned.
Let's jump into our next video and I'll show you how I did that.