Here's a page design which animates on load,
realizing now that we should have put a spoiler
tag on the lesson title.
We're going to cover page load interactions
— and we'll do it in three steps: (1) we'll
set up the page load trigger, (2) we'll build
our animation, and (3) we'll ask Dale to repeatedly
test the results.
Let's do the trigger.
And this one's straightforward.
In the Interactions panel, we'll add a trigger
right to our page.
Of course, we'll want to choose page load.
And immediately, we're presented with two
options: we can animate when the page starts
loading, or we can wait until the page finishes
loading.
Or, we can animate some elements while loading
— and others once we're finished.
For now, let's go in and do an animation when
the page starts loading.
And that's it.
We've set up our trigger.
Let's animate.
We'll click to create a new timed animation.
Let's give it a great name.
From here, we can animate by selecting the
first element we want to animate.
And we start...by adding an action.
If we move, for example, and we set up a movement
on our controls here, and hit play?
We're essentially animating the element from
its initial state to the state we just added.
If we want to actually start there, we'll
set this as our initial state.
(We're telling that element: "this is where
everything begins.")
We can also create actions to adjust other
properties, like opacity.
We can make a change here, and set this one
as the initial state as well to— [Siri]
I can't see anything.
[McGuire] What?
[Siri] I can't see anything.
[McGuire] Okay, again, we’ll get there — let's
keep animating.
We'll add another action to move (this will
happen while the page is loading).
And we can essentially set this one to the
origin.
This is the original position before we tweaked
it for the initial state.
And we'll add another action for opacity.
If we preview?
Our animation works exactly as expected.
[Siri] It's ugly.
[McGuire] What's that?
[Siri] It's linear.
There's no easing, and .5 seconds is too quick.
This whole thing feels super janky.
Good point.
In fact, this gives us the opportunity to
select multiple actions.
Just holding shift here and clicking to select
(this way changes affect both move and opacity).
We can change our easing to make sure we ease
out.
And we'll change our duration — how long
the animation lasts — to a full second.
Preview our animation, and it looks much better
than— [Siri, overlapping] That's much better.
[McGuire] Thank you.
Now remember: this trigger — the animation
we created here — is triggered by the page
starting to load.
So we can select another element and add some
actions there as well.
What we're doing here is going in and making
our change, then setting that change as the
initial state.
Just like before, we can add multiple actions
to an element — in this case, we're adding
these actions just like we did before (to
set the initial state).
After we've set our initial state, we can
hover over to see our options: we can make
a new action that occurs before that first
element animates, we can make one that occurs
with that first animation, or we can animate
this after that animation completes.
Let's do after for right now (we can always
change this).
We'll go in and set the value for our action.
And once we do that, we can go in and set
up another action, adjusting the value here
as well.
Making sure it's exactly where it needs to
be.
If we play?
The first animation, then the second animation.
Which is, by the way, not a great sentence.
Nor is it the best animation.
Let's select both of these actions and do
what we did before.
We'll go in and change our easing curve for
the animation, and we'll adjust our duration.
Play again?
It's looking much better now.
What if we change our mind?
What if we want this element to animate before
the first element?
Make sure these actions are selected, and
we just drag...and drop.
Hit play?
Works perfectly.
Exactly as expected.
Let's move these back to where they were.
Now what if we want the animations to overlap
a tiny bit?
Let's see what happens when we start this
with the previous action.
As expected, the animation starts with the
previous action (in this case, that first
element animating).
What about doing an offset or a delay?
Just add the delay, and we've created a staggered
entrance.
Now there's no limit to what we can add to
this animation.
So we've skipped ahead a bit and configured
other elements as well — this is the same
idea — we used the same principles we covered
over the last few minutes, and built out our
animation to include actions affecting all
these elements.
And now let's test.
Go to Preview?
The animation loads with the page.
And it looks pretty good.
But remember at the beginning of this when
we talked about starting the animation when
the page loads versus when the page finishes
loading?
Maybe you built out a complex animation and
changed your mind about when it should start.
Two things we can do here:
We can go back into our timed actions — back
into the animation — and select our first
action.
We can choose to add a delay here, which essentially
means this: the first element won't start
animating until this long — that delay — the
animation won't start until this long after
the page starts loading.
The second option — the second way we can
delay this — is to go back in and change
our action so it's no longer occurring when
the page starts loading; rather, we want the
animation to occur when the page finishes
loading.
So that's an option as well.
Let's summarize: We can use page load as a
trigger to start a timed animation.
We can design that animation with multiple
elements and effects and overlapping and easing,
and all sorts of fun stuff, and we can try
it out and see how it looks right in the Designer.
