In this episode, I show you my top 5 concepts you should know when building animations with Angular 4.3+. Get the full lesson code: https://angularfirebase.com/lessons/animation-examples-in-angular-4-3/


Also, check out the official docs https://angular.io/guide/animations
2024-02-04T08:19:44.712Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
5e6ed0ae-530d-44e8-94fe-b172e5001e88
5fe3d85e7ef2871e9b7abc167244588fa761df811d8544b1903d1971af737bc2
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Animation is often the x factor that separates remarkable apps from ordinary apps.
In this episode, I'm going to cover 5 different concepts related to Angular animations, including a few new concepts that were introduced in Angular 4.2.
Angular animations are built on the Web Animations API, which is very similar to CSS 3 animations.
If you're not comfortable with animation at all I recommend doing some practice with CSS 3 first and then you'll be able to make the most out of Angular's animation module.
The first step to get started is to import of the browser animation module into whatever module you plan on using animations.
In this first example, I'm going to create a fade in fade out animation that will show some content in a popover when a button is clicked.
We import the methods we need from the animation module and then we'll create a boolean variable show that will determine the visibility of the popover.
I also create a getter called state name which will return the boolean variable as a string either show or hide which we need when defining the animation itself.
In the HTML, we use animations by prefixing the animation name with the at symbol and then pass it the current state of whatever variable we're going to animate.
In this case, the only possible values will be show or hide.
And then we add a button for the user to toggle this variable.
The end result should look something like this.
It's just a simple that fades in and fades out out when that button is clicked.
Every component has an animations property which accepts an array.
First, we pass it a trigger which corresponds to the name with the at symbol in the HTML.
Then we define how each state should look once the animation is complete.
When the pop over is being shown, the opacity is 1.
When it's hidden, the opacity is 0.
To actually make this animate, we need to define a transition which sets the time parameter for the animation to occur.
In this case, when we transition from show to hide, it will animate in 600 milliseconds and ease out.
And then when we transition from hide to show, it will transition in a 1000 milliseconds for one second with an ease in.
And the end result is that simple fade in fade out animation.
Now Now we're going to build an animation that can handle multiple different states.
Here we have a photo gallery component and we're gonna represent its state with the position variable.
Then we'll add a few buttons for the user to change the state on the front end.
Then we'll apply the photo state trigger to the image itself.
The goal is to have the user click these buttons and have the animation go from state to state seamlessly.
So, again, we start by defining the trigger, and then we have 3 different states that we need to define.
The move state will move the image across the screen.
We do this by using the transform in translate x which means translate on the x axis.
If you've used CSS 3 animations this should look very familiar to you.
You can adjust the position using both a percentage or pixel value.
To enlarge the image, we'll use the transform scale, which will increase the size of the image by a factor of 1.5.
To spin the image, we'll use the transform rotate, and this takes degrees as arguments and operates on all three axes.
So now we have 4 possible states including the default state, and that gives us 16 possible combinations to animate.
It'd be very cumbersome to define each transition individually, but Angular offers a wildcard option which we can use to apply the transition to every different possible state.
So here we apply the wildcard as a 500 millisecond ease.
Back in the app, we can now see that each of these 16 combinations will use the 500 millisecond transition.
What if you wanted to control the intermediate steps in an animation?
You can do this with keyframes.
First, make sure you import the key frames method into your component.
Then we'll use the key frames as an argument to the animate method inside the transition.
Keyframes represent points in time relative to the length of the animation itself.
So in this example, we have a 2,000 millisecond transition.
So an offset of 0.33 would represent approximately 660 milliseconds.
In this example, we're just translating and rotating the image all over the green just to demonstrate how key frames can create nonlinear animations.
Back in the app, we can see the image move to the right and then up before reaching its final resting state.
Another cool feature about Angular animations is the ability to run callbacks when an animation is either started or finished.
In this example, we're just going to console log the animation and its current state.
Animation callbacks are really similar to button clicks or any other user event.
We simply call the photo state dot start and then fire whatever function we want to fire.
Then back in the typescript we just create a function that will handle the console login for us.
This is especially useful if you wanna run a sequence of animations in a very choreographed kind of way.
The last animation feature I wanna talk about is list animations, which uses 2 features that are new in Angular 4.2.
The new query method allows you to select elements that are nested within an animation based on their HTML tag.
In this case, We'll use it to query all the images nested within an animation context.
Once we've queried those images, we can use stagger to create a delay between each animation of each image creating a shutter like effect.
We start by defining the trigger and then the transition we'll just use the wildcard.
Then we can query every image that is nested within that trigger.
And first, we'll get the images and translate them off the screen.
Then we add an animation within the context of stagger, which will stagger each item in the collection by 600 milliseconds.
In most cases, you'd make the stagger delay a little bit faster, but I'll keep it slow for this example.
In the template, we add the animation trigger to a div passing the length of the collection to it and then we loop over a collection of photos.
Because these images are nested within the photo's animation, the query Electr will automatically grab all the images and put them into an array.
Back in the app, we see that each image slides into the screen one after the other.
That's it for Angular animation basics.
If this video helped you, please like and subscribe.
And if you wanna support the channel, consider becoming a pro member at angular firebase.com.
You'll get access to a free copy of my book as well as free 1 on 1 project consulting.
Thanks for watching and I'll see you soon.

Speaker 0: Animation is often the x factor that separates remarkable apps from ordinary apps. In this episode, I'm going to cover 5 different concepts related to Angular animations, including a few new concepts that were introduced in Angular 4.2. Angular animations are built on the Web Animations API, which is very similar to CSS 3 animations. If you're not comfortable with animation at all I recommend doing some practice with CSS 3 first and then you'll be able to make the most out of Angular's animation module. The first step to get started is to import of the browser animation module into whatever module you plan on using animations.

In this first example, I'm going to create a fade in fade out animation that will show some content in a popover when a button is clicked. We import the methods we need from the animation module and then we'll create a boolean variable show that will determine the visibility of the popover. I also create a getter called state name which will return the boolean variable as a string either show or hide which we need when defining the animation itself. In the HTML, we use animations by prefixing the animation name with the at symbol and then pass it the current state of whatever variable we're going to animate. In this case, the only possible values will be show or hide.

And then we add a button for the user to toggle this variable. The end result should look something like this. It's just a simple that fades in and fades out out when that button is clicked. Every component has an animations property which accepts an array. First, we pass it a trigger which corresponds to the name with the at symbol in the HTML.

Then we define how each state should look once the animation is complete. When the pop over is being shown, the opacity is 1. When it's hidden, the opacity is 0. To actually make this animate, we need to define a transition which sets the time parameter for the animation to occur. In this case, when we transition from show to hide, it will animate in 600 milliseconds and ease out.

And then when we transition from hide to show, it will transition in a 1000 milliseconds for one second with an ease in. And the end result is that simple fade in fade out animation. Now Now we're going to build an animation that can handle multiple different states. Here we have a photo gallery component and we're gonna represent its state with the position variable. Then we'll add a few buttons for the user to change the state on the front end.

Then we'll apply the photo state trigger to the image itself. The goal is to have the user click these buttons and have the animation go from state to state seamlessly. So, again, we start by defining the trigger, and then we have 3 different states that we need to define. The move state will move the image across the screen. We do this by using the transform in translate x which means translate on the x axis.

If you've used CSS 3 animations this should look very familiar to you. You can adjust the position using both a percentage or pixel value. To enlarge the image, we'll use the transform scale, which will increase the size of the image by a factor of 1.5. To spin the image, we'll use the transform rotate, and this takes degrees as arguments and operates on all three axes. So now we have 4 possible states including the default state, and that gives us 16 possible combinations to animate.

It'd be very cumbersome to define each transition individually, but Angular offers a wildcard option which we can use to apply the transition to every different possible state. So here we apply the wildcard as a 500 millisecond ease. Back in the app, we can now see that each of these 16 combinations will use the 500 millisecond transition. What if you wanted to control the intermediate steps in an animation? You can do this with keyframes.

First, make sure you import the key frames method into your component. Then we'll use the key frames as an argument to the animate method inside the transition. Keyframes represent points in time relative to the length of the animation itself. So in this example, we have a 2,000 millisecond transition. So an offset of 0.33 would represent approximately 660 milliseconds.

In this example, we're just translating and rotating the image all over the green just to demonstrate how key frames can create nonlinear animations. Back in the app, we can see the image move to the right and then up before reaching its final resting state. Another cool feature about Angular animations is the ability to run callbacks when an animation is either started or finished. In this example, we're just going to console log the animation and its current state. Animation callbacks are really similar to button clicks or any other user event.

We simply call the photo state dot start and then fire whatever function we want to fire. Then back in the typescript we just create a function that will handle the console login for us. This is especially useful if you wanna run a sequence of animations in a very choreographed kind of way. The last animation feature I wanna talk about is list animations, which uses 2 features that are new in Angular 4.2. The new query method allows you to select elements that are nested within an animation based on their HTML tag.

In this case, We'll use it to query all the images nested within an animation context. Once we've queried those images, we can use stagger to create a delay between each animation of each image creating a shutter like effect. We start by defining the trigger and then the transition we'll just use the wildcard. Then we can query every image that is nested within that trigger. And first, we'll get the images and translate them off the screen.

Then we add an animation within the context of stagger, which will stagger each item in the collection by 600 milliseconds. In most cases, you'd make the stagger delay a little bit faster, but I'll keep it slow for this example. In the template, we add the animation trigger to a div passing the length of the collection to it and then we loop over a collection of photos. Because these images are nested within the photo's animation, the query Electr will automatically grab all the images and put them into an array. Back in the app, we see that each image slides into the screen one after the other.

That's it for Angular animation basics. If this video helped you, please like and subscribe. And if you wanna support the channel, consider becoming a pro member at angular firebase.com. You'll get access to a free copy of my book as well as free 1 on 1 project consulting. Thanks for watching and I'll see you soon.
Animation is often the x factor that separates remarkable apps from ordinary apps. In this episode, I'm going to cover 5 different concepts related to Angular animations, including a few new concepts that were introduced in Angular 4.2. Angular animations are built on the Web Animations API, which is very similar to CSS 3 animations. If you're not comfortable with animation at all I recommend doing some practice with CSS 3 first and then you'll be able to make the most out of Angular's animation module. The first step to get started is to import of the browser animation module into whatever module you plan on using animations. In this first example, I'm going to create a fade in fade out animation that will show some content in a popover when a button is clicked. We import the methods we need from the animation module and then we'll create a boolean variable show that will determine the visibility of the popover. I also create a getter called state name which will return the boolean variable as a string either show or hide which we need when defining the animation itself. In the HTML, we use animations by prefixing the animation name with the at symbol and then pass it the current state of whatever variable we're going to animate. In this case, the only possible values will be show or hide. And then we add a button for the user to toggle this variable. The end result should look something like this. It's just a simple that fades in and fades out out when that button is clicked. Every component has an animations property which accepts an array. First, we pass it a trigger which corresponds to the name with the at symbol in the HTML. Then we define how each state should look once the animation is complete. When the pop over is being shown, the opacity is 1. When it's hidden, the opacity is 0. To actually make this animate, we need to define a transition which sets the time parameter for the animation to occur. In this case, when we transition from show to hide, it will animate in 600 milliseconds and ease out. And then when we transition from hide to show, it will transition in a 1000 milliseconds for one second with an ease in. And the end result is that simple fade in fade out animation. Now Now we're going to build an animation that can handle multiple different states. Here we have a photo gallery component and we're gonna represent its state with the position variable. Then we'll add a few buttons for the user to change the state on the front end. Then we'll apply the photo state trigger to the image itself. The goal is to have the user click these buttons and have the animation go from state to state seamlessly. So, again, we start by defining the trigger, and then we have 3 different states that we need to define. The move state will move the image across the screen. We do this by using the transform in translate x which means translate on the x axis. If you've used CSS 3 animations this should look very familiar to you. You can adjust the position using both a percentage or pixel value. To enlarge the image, we'll use the transform scale, which will increase the size of the image by a factor of 1.5. To spin the image, we'll use the transform rotate, and this takes degrees as arguments and operates on all three axes. So now we have 4 possible states including the default state, and that gives us 16 possible combinations to animate. It'd be very cumbersome to define each transition individually, but Angular offers a wildcard option which we can use to apply the transition to every different possible state.
animation
geometry
photography
visualization
graphic design
modeling
So here we apply the wildcard as a 500 millisecond ease. Back in the app, we can now see that each of these 16 combinations will use the 500 millisecond transition. What if you wanted to control the intermediate steps in an animation? You can do this with keyframes. First, make sure you import the key frames method into your component. Then we'll use the key frames as an argument to the animate method inside the transition. Keyframes represent points in time relative to the length of the animation itself. So in this example, we have a 2,000 millisecond transition. So an offset of 0.33 would represent approximately 660 milliseconds. In this example, we're just translating and rotating the image all over the green just to demonstrate how key frames can create nonlinear animations. Back in the app, we can see the image move to the right and then up before reaching its final resting state. Another cool feature about Angular animations is the ability to run callbacks when an animation is either started or finished. In this example, we're just going to console log the animation and its current state. Animation callbacks are really similar to button clicks or any other user event. We simply call the photo state dot start and then fire whatever function we want to fire. Then back in the typescript we just create a function that will handle the console login for us. This is especially useful if you wanna run a sequence of animations in a very choreographed kind of way. The last animation feature I wanna talk about is list animations, which uses 2 features that are new in Angular 4.2. The new query method allows you to select elements that are nested within an animation based on their HTML tag. In this case, We'll use it to query all the images nested within an animation context. Once we've queried those images, we can use stagger to create a delay between each animation of each image creating a shutter like effect. We start by defining the trigger and then the transition we'll just use the wildcard. Then we can query every image that is nested within that trigger. And first, we'll get the images and translate them off the screen. Then we add an animation within the context of stagger, which will stagger each item in the collection by 600 milliseconds. In most cases, you'd make the stagger delay a little bit faster, but I'll keep it slow for this example. In the template, we add the animation trigger to a div passing the length of the collection to it and then we loop over a collection of photos. Because these images are nested within the photo's animation, the query Electr will automatically grab all the images and put them into an array. Back in the app, we see that each image slides into the screen one after the other. That's it for Angular animation basics. If this video helped you, please like and subscribe. And if you wanna support the channel, consider becoming a pro member at angular firebase.com. You'll get access to a free copy of my book as well as free 1 on 1 project consulting. Thanks for watching and I'll see you soon.
animation
books
youtube
publishing
visualization
programming
modeling
literature
copyright
photography
Animation is often the x factor that separates remarkable apps from ordinary apps. In this episode, I'm going to cover 5 different concepts related to Angular animations, including a few new concepts that were introduced in Angular 4.2. Angular animations are built on the Web Animations API, which is very similar to CSS 3 animations. If you're not comfortable with animation at all I recommend doing some practice with CSS 3 first and then you'll be able to make the most out of Angular's animation module. The first step to get started is to import of the browser animation module into whatever module you plan on using animations. In this first example, I'm going to create a fade in fade out animation that will show some content in a popover when a button is clicked. We import the methods we need from the animation module and then we'll create a boolean variable show that will determine the visibility of the popover. I also create a getter called state name which will return the boolean variable as a string either show or hide which we need when defining the animation itself. In the HTML, we use animations by prefixing the animation name with the at symbol and then pass it the current state of whatever variable we're going to animate. In this case, the only possible values will be show or hide. And then we add a button for the user to toggle this variable. The end result should look something like this. It's just a simple that fades in and fades out out when that button is clicked. Every component has an animations property which accepts an array. First, we pass it a trigger which corresponds to the name with the at symbol in the HTML. Then we define how each state should look once the animation is complete. When the pop over is being shown, the opacity is 1. When it's hidden, the opacity is 0. To actually make this animate, we need to define a transition which sets the time parameter for the animation to occur. In this case, when we transition from show to hide, it will animate in 600 milliseconds and ease out. And then when we transition from hide to show, it will transition in a 1000 milliseconds for one second with an ease in. And the end result is that simple fade in fade out animation. Now Now we're going to build an animation that can handle multiple different states. Here we have a photo gallery component and we're gonna represent its state with the position variable. Then we'll add a few buttons for the user to change the state on the front end. Then we'll apply the photo state trigger to the image itself. The goal is to have the user click these buttons and have the animation go from state to state seamlessly. So, again, we start by defining the trigger, and then we have 3 different states that we need to define. The move state will move the image across the screen. We do this by using the transform in translate x which means translate on the x axis. If you've used CSS 3 animations this should look very familiar to you. You can adjust the position using both a percentage or pixel value. To enlarge the image, we'll use the transform scale, which will increase the size of the image by a factor of 1.5. To spin the image, we'll use the transform rotate, and this takes degrees as arguments and operates on all three axes. So now we have 4 possible states including the default state, and that gives us 16 possible combinations to animate. It'd be very cumbersome to define each transition individually, but Angular offers a wildcard option which we can use to apply the transition to every different possible state. So here we apply the wildcard as a 500 millisecond ease. Back in the app, we can now see that each of these 16 combinations will use the 500 millisecond transition. What if you wanted to control the intermediate steps in an animation? You can do this with keyframes. First, make sure you import the key frames method into your component. Then we'll use the key frames as an argument to the animate method inside the transition. Keyframes represent points in time relative to the length of the animation itself. So in this example, we have a 2,000 millisecond transition. So an offset of 0.33 would represent approximately 660 milliseconds. In this example, we're just translating and rotating the image all over the green just to demonstrate how key frames can create nonlinear animations. Back in the app, we can see the image move to the right and then up before reaching its final resting state. Another cool feature about Angular animations is the ability to run callbacks when an animation is either started or finished. In this example, we're just going to console log the animation and its current state. Animation callbacks are really similar to button clicks or any other user event. We simply call the photo state dot start and then fire whatever function we want to fire. Then back in the typescript we just create a function that will handle the console login for us. This is especially useful if you wanna run a sequence of animations in a very choreographed kind of way. The last animation feature I wanna talk about is list animations, which uses 2 features that are new in Angular 4.2. The new query method allows you to select elements that are nested within an animation based on their HTML tag. In this case, We'll use it to query all the images nested within an animation context. Once we've queried those images, we can use stagger to create a delay between each animation of each image creating a shutter like effect. We start by defining the trigger and then the transition we'll just use the wildcard. Then we can query every image that is nested within that trigger. And first, we'll get the images and translate them off the screen. Then we add an animation within the context of stagger, which will stagger each item in the collection by 600 milliseconds. In most cases, you'd make the stagger delay a little bit faster, but I'll keep it slow for this example. In the template, we add the animation trigger to a div passing the length of the collection to it and then we loop over a collection of photos. Because these images are nested within the photo's animation, the query Electr will automatically grab all the images and put them into an array. Back in the app, we see that each image slides into the screen one after the other. That's it for Angular animation basics. If this video helped you, please like and subscribe. And if you wanna support the channel, consider becoming a pro member at angular firebase.com. You'll get access to a free copy of my book as well as free 1 on 1 project consulting. Thanks for watching and I'll see you soon.
Animation
animation
is
is
often
often
the
the
x
x
factor
factor
that
that
separates
separates
remarkable
remarkable
apps
apps
from
from
ordinary
ordinary
apps.
apps
In
in
this
this
episode,
episode
I'm
i'm
going
going
to
to
cover
cover
5
5
different
different
concepts
concepts
related
related
to
to
Angular
angular
animations,
animations
including
including
a
a
few
few
new
new
concepts
concepts
that
that
were
were
introduced
introduced
in
in
Angular
angular
4.2.
4.2
Angular
angular
animations
animations
are
are
built
built
on
on
the
the
Web
web
Animations
animations
API,
api
which
which
is
is
very
very
similar
similar
to
to
CSS
css
3
3
animations.
animations
If
if
you're
you're
not
not
comfortable
comfortable
with
with
animation
animation
at
at
all
all
I
i
recommend
recommend
doing
doing
some
some
practice
practice
with
with
CSS
css
3
3
first
first
and
and
then
then
you'll
you'll
be
be
able
able
to
to
make
make
the
the
most
most
out
out
of
of
Angular's
angular's
animation
animation
module.
module
The
the
first
first
step
step
to
to
get
get
started
started
is
is
to
to
import
import
of
of
the
the
browser
browser
animation
animation
module
module
into
into
whatever
whatever
module
module
you
you
plan
plan
on
on
using
using
animations.
animations
In
in
this
this
first
first
example,
example
I'm
i'm
going
going
to
to
create
create
a
a
fade
fade
in
in
fade
fade
out
out
animation
animation
that
that
will
will
show
show
some
some
content
content
in
in
a
a
popover
popover
when
when
a
a
button
button
is
is
clicked.
clicked
We
we
import
import
the
the
methods
methods
we
we
need
need
from
from
the
the
animation
animation
module
module
and
and
then
then
we'll
we'll
create
create
a
a
boolean
boolean
variable
variable
show
show
that
that
will
will
determine
determine
the
the
visibility
visibility
of
of
the
the
popover.
popover
I
i
also
also
create
create
a
a
getter
getter
called
called
state
state
name
name
which
which
will
will
return
return
the
the
boolean
boolean
variable
variable
as
as
a
a
string
string
either
either
show
show
or
or
hide
hide
which
which
we
we
need
need
when
when
defining
defining
the
the
animation
animation
itself.
itself
In
in
the
the
HTML,
html
we
we
use
use
animations
animations
by
by
prefixing
prefixing
the
the
animation
animation
name
name
with
with
the
the
at
at
symbol
symbol
and
and
then
then
pass
pass
it
it
the
the
current
current
state
state
of
of
whatever
whatever
variable
variable
we're
we're
going
going
to
to
animate.
animate
In
in
this
this
case,
case
the
the
only
only
possible
possible
values
values
will
will
be
be
show
show
or
or
hide.
hide
And
and
then
then
we
we
add
add
a
a
button
button
for
for
the
the
user
user
to
to
toggle
toggle
this
this
variable.
variable
The
the
end
end
result
result
should
should
look
look
something
something
like
like
this.
this
It's
it's
just
just
a
a
simple
simple
that
that
fades
fades
in
in
and
and
fades
fades
out
out
out
out
when
when
that
that
button
button
is
is
clicked.
clicked
Every
every
component
component
has
has
an
an
animations
animations
property
property
which
which
accepts
accepts
an
an
array.
array
First,
first
we
we
pass
pass
it
it
a
a
trigger
trigger
which
which
corresponds
corresponds
to
to
the
the
name
name
with
with
the
the
at
at
symbol
symbol
in
in
the
the
HTML.
html
Then
then
we
we
define
define
how
how
each
each
state
state
should
should
look
look
once
once
the
the
animation
animation
is
is
complete.
complete
When
when
the
the
pop
pop
over
over
is
is
being
being
shown,
shown
the
the
opacity
opacity
is
is
1.
1
When
when
it's
it's
hidden,
hidden
the
the
opacity
opacity
is
is
0.
0
To
to
actually
actually
make
make
this
this
animate,
animate
we
we
need
need
to
to
define
define
a
a
transition
transition
which
which
sets
sets
the
the
time
time
parameter
parameter
for
for
the
the
animation
animation
to
to
occur.
occur
In
in
this
this
case,
case
when
when
we
we
transition
transition
from
from
show
show
to
to
hide,
hide
it
it
will
will
animate
animate
in
in
600
600
milliseconds
milliseconds
and
and
ease
ease
out.
out
And
and
then
then
when
when
we
we
transition
transition
from
from
hide
hide
to
to
show,
show
it
it
will
will
transition
transition
in
in
a
a
1000
1000
milliseconds
milliseconds
for
for
one
one
second
second
with
with
an
an
ease
ease
in.
in
And
and
the
the
end
end
result
result
is
is
that
that
simple
simple
fade
fade
in
in
fade
fade
out
out
animation.
animation
Now
now
Now
now
we're
we're
going
going
to
to
build
build
an
an
animation
animation
that
that
can
can
handle
handle
multiple
multiple
different
different
states.
states
Here
here
we
we
have
have
a
a
photo
photo
gallery
gallery
component
component
and
and
we're
we're
gonna
gonna
represent
represent
its
its
state
state
with
with
the
the
position
position
variable.
variable
Then
then
we'll
we'll
add
add
a
a
few
few
buttons
buttons
for
for
the
the
user
user
to
to
change
change
the
the
state
state
on
on
the
the
front
front
end.
end
Then
then
we'll
we'll
apply
apply
the
the
photo
photo
state
state
trigger
trigger
to
to
the
the
image
image
itself.
itself
The
the
goal
goal
is
is
to
to
have
have
the
the
user
user
click
click
these
these
buttons
buttons
and
and
have
have
the
the
animation
animation
go
go
from
from
state
state
to
to
state
state
seamlessly.
seamlessly
So,
so
again,
again
we
we
start
start
by
by
defining
defining
the
the
trigger,
trigger
and
and
then
then
we
we
have
have
3
3
different
different
states
states
that
that
we
we
need
need
to
to
define.
define
The
the
move
move
state
state
will
will
move
move
the
the
image
image
across
across
the
the
screen.
screen
We
we
do
do
this
this
by
by
using
using
the
the
transform
transform
in
in
translate
translate
x
x
which
which
means
means
translate
translate
on
on
the
the
x
x
axis.
axis
If
if
you've
you've
used
used
CSS
css
3
3
animations
animations
this
this
should
should
look
look
very
very
familiar
familiar
to
to
you.
you
You
you
can
can
adjust
adjust
the
the
position
position
using
using
both
both
a
a
percentage
percentage
or
or
pixel
pixel
value.
value
To
to
enlarge
enlarge
the
the
image,
image
we'll
we'll
use
use
the
the
transform
transform
scale,
scale
which
which
will
will
increase
increase
the
the
size
size
of
of
the
the
image
image
by
by
a
a
factor
factor
of
of
1.5.
1.5
To
to
spin
spin
the
the
image,
image
we'll
we'll
use
use
the
the
transform
transform
rotate,
rotate
and
and
this
this
takes
takes
degrees
degrees
as
as
arguments
arguments
and
and
operates
operates
on
on
all
all
three
three
axes.
axes
So
so
now
now
we
we
have
have
4
4
possible
possible
states
states
including
including
the
the
default
default
state,
state
and
and
that
that
gives
gives
us
us
16
16
possible
possible
combinations
combinations
to
to
animate.
animate
It'd
it'd
be
be
very
very
cumbersome
cumbersome
to
to
define
define
each
each
transition
transition
individually,
individually
but
but
Angular
angular
offers
offers
a
a
wildcard
wildcard
option
option
which
which
we
we
can
can
use
use
to
to
apply
apply
the
the
transition
transition
to
to
every
every
different
different
possible
possible
state.
state
So
so
here
here
we
we
apply
apply
the
the
wildcard
wildcard
as
as
a
a
500
500
millisecond
millisecond
ease.
ease
Back
back
in
in
the
the
app,
app
we
we
can
can
now
now
see
see
that
that
each
each
of
of
these
these
16
16
combinations
combinations
will
will
use
use
the
the
500
500
millisecond
millisecond
transition.
transition
What
what
if
if
you
you
wanted
wanted
to
to
control
control
the
the
intermediate
intermediate
steps
steps
in
in
an
an
animation?
animation
You
you
can
can
do
do
this
this
with
with
keyframes.
keyframes
First,
first
make
make
sure
sure
you
you
import
import
the
the
key
key
frames
frames
method
method
into
into
your
your
component.
component
Then
then
we'll
we'll
use
use
the
the
key
key
frames
frames
as
as
an
an
argument
argument
to
to
the
the
animate
animate
method
method
inside
inside
the
the
transition.
transition
Keyframes
keyframes
represent
represent
points
points
in
in
time
time
relative
relative
to
to
the
the
length
length
of
of
the
the
animation
animation
itself.
itself
So
so
in
in
this
this
example,
example
we
we
have
have
a
a
2,000
2,000
millisecond
millisecond
transition.
transition
So
so
an
an
offset
offset
of
of
0.33
0.33
would
would
represent
represent
approximately
approximately
660
660
milliseconds.
milliseconds
In
in
this
this
example,
example
we're
we're
just
just
translating
translating
and
and
rotating
rotating
the
the
image
image
all
all
over
over
the
the
green
green
just
just
to
to
demonstrate
demonstrate
how
how
key
key
frames
frames
can
can
create
create
nonlinear
nonlinear
animations.
animations
Back
back
in
in
the
the
app,
app
we
we
can
can
see
see
the
the
image
image
move
move
to
to
the
the
right
right
and
and
then
then
up
up
before
before
reaching
reaching
its
its
final
final
resting
resting
state.
state
Another
another
cool
cool
feature
feature
about
about
Angular
angular
animations
animations
is
is
the
the
ability
ability
to
to
run
run
callbacks
callbacks
when
when
an
an
animation
animation
is
is
either
either
started
started
or
or
finished.
finished
In
in
this
this
example,
example
we're
we're
just
just
going
going
to
to
console
console
log
log
the
the
animation
animation
and
and
its
its
current
current
state.
state
Animation
animation
callbacks
callbacks
are
are
really
really
similar
similar
to
to
button
button
clicks
clicks
or
or
any
any
other
other
user
user
event.
event
We
we
simply
simply
call
call
the
the
photo
photo
state
state
dot
dot
start
start
and
and
then
then
fire
fire
whatever
whatever
function
function
we
we
want
want
to
to
fire.
fire
Then
then
back
back
in
in
the
the
typescript
typescript
we
we
just
just
create
create
a
a
function
function
that
that
will
will
handle
handle
the
the
console
console
login
login
for
for
us.
us
This
this
is
is
especially
especially
useful
useful
if
if
you
you
wanna
wanna
run
run
a
a
sequence
sequence
of
of
animations
animations
in
in
a
a
very
very
choreographed
choreographed
kind
kind
of
of
way.
way
The
the
last
last
animation
animation
feature
feature
I
i
wanna
wanna
talk
talk
about
about
is
is
list
list
animations,
animations
which
which
uses
uses
2
2
features
features
that
that
are
are
new
new
in
in
Angular
angular
4.2.
4.2
The
the
new
new
query
query
method
method
allows
allows
you
you
to
to
select
select
elements
elements
that
that
are
are
nested
nested
within
within
an
an
animation
animation
based
based
on
on
their
their
HTML
html
tag.
tag
In
in
this
this
case,
case
We'll
we'll
use
use
it
it
to
to
query
query
all
all
the
the
images
images
nested
nested
within
within
an
an
animation
animation
context.
context
Once
once
we've
we've
queried
queried
those
those
images,
images
we
we
can
can
use
use
stagger
stagger
to
to
create
create
a
a
delay
delay
between
between
each
each
animation
animation
of
of
each
each
image
image
creating
creating
a
a
shutter
shutter
like
like
effect.
effect
We
we
start
start
by
by
defining
defining
the
the
trigger
trigger
and
and
then
then
the
the
transition
transition
we'll
we'll
just
just
use
use
the
the
wildcard.
wildcard
Then
then
we
we
can
can
query
query
every
every
image
image
that
that
is
is
nested
nested
within
within
that
that
trigger.
trigger
And
and
first,
first
we'll
we'll
get
get
the
the
images
images
and
and
translate
translate
them
them
off
off
the
the
screen.
screen
Then
then
we
we
add
add
an
an
animation
animation
within
within
the
the
context
context
of
of
stagger,
stagger
which
which
will
will
stagger
stagger
each
each
item
item
in
in
the
the
collection
collection
by
by
600
600
milliseconds.
milliseconds
In
in
most
most
cases,
cases
you'd
you'd
make
make
the
the
stagger
stagger
delay
delay
a
a
little
little
bit
bit
faster,
faster
but
but
I'll
i'll
keep
keep
it
it
slow
slow
for
for
this
this
example.
example
In
in
the
the
template,
template
we
we
add
add
the
the
animation
animation
trigger
trigger
to
to
a
a
div
div
passing
passing
the
the
length
length
of
of
the
the
collection
collection
to
to
it
it
and
and
then
then
we
we
loop
loop
over
over
a
a
collection
collection
of
of
photos.
photos
Because
because
these
these
images
images
are
are
nested
nested
within
within
the
the
photo's
photo's
animation,
animation
the
the
query
query
Electr
electr
will
will
automatically
automatically
grab
grab
all
all
the
the
images
images
and
and
put
put
them
them
into
into
an
an
array.
array
Back
back
in
in
the
the
app,
app
we
we
see
see
that
that
each
each
image
image
slides
slides
into
into
the
the
screen
screen
one
one
after
after
the
the
other.
other
That's
that's
it
it
for
for
Angular
angular
animation
animation
basics.
basics
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
support
support
the
the
channel,
channel
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angular
angular
firebase.com.
firebase.com
You'll
you'll
get
get
access
access
to
to
a
a
free
free
copy
copy
of
of
my
my
book
book
as
as
well
well
as
as
free
free
1
1
on
on
1
1
project
project
consulting.
consulting
Thanks
thanks
for
for
watching
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
In this video, Speaker 0 discusses five new Angular animations, including the importance of Angular's animation module and the use of Angular's Web reassure API. They explain how to import the browser animation module into the Angular version and create a popover, and how to use the media component to create a fade in fade out animation. They also discuss the use of keyframes and the ability to run callbacks when an animation is complete. Finally, they discuss the use of a web template to create a delay between images and a photo.
Learn Angular Animations with 5 Examples
Animation is often the x factor that separates remarkable apps from ordinary apps. In this episode, I'm going to cover 5 different concepts related to Angular animations, including a few new concepts that were introduced in Angular 4.2. Angular animations are built on the Web Animations API, which is very similar to CSS 3 animations. If you're not comfortable with animation at all I recommend doing some practice with CSS 3 first and then you'll be able to make the most out of Angular's animation module. The first step to get started is to import of the browser animation module into whatever module you plan on using animations. In this first example, I'm going to create a fade in fade out animation that will show some content in a popover when a button is clicked. We import the methods we need from the animation module and then we'll create a boolean variable show that will determine the visibility of the popover. I also create a getter called state name which will return the boolean variable as a string either show or hide which we need when defining the animation itself. In the HTML, we use animations by prefixing the animation name with the at symbol and then pass it the current state of whatever variable we're going to animate. In this case, the only possible values will be show or hide. And then we add a button for the user to toggle this variable. The end result should look something like this. It's just a simple that fades in and fades out out when that button is clicked. Every component has an animations property which accepts an array. First, we pass it a trigger which corresponds to the name with the at symbol in the HTML. Then we define how each state should look once the animation is complete. When the pop over is being shown, the opacity is 1. When it's hidden, the opacity is 0. To actually make this animate, we need to define a transition which sets the time parameter for the animation to occur. In this case, when we transition from show to hide, it will animate in 600 milliseconds and ease out. And then when we transition from hide to show, it will transition in a 1000 milliseconds for one second with an ease in. And the end result is that simple fade in fade out animation. Now Now we're going to build an animation that can handle multiple different states. Here we have a photo gallery component and we're gonna represent its state with the position variable. Then we'll add a few buttons for the user to change the state on the front end. Then we'll apply the photo state trigger to the image itself. The goal is to have the user click these buttons and have the animation go from state to state seamlessly. So, again, we start by defining the trigger, and then we have 3 different states that we need to define. The move state will move the image across the screen. We do this by using the transform in translate x which means translate on the x axis. If you've used CSS 3 animations this should look very familiar to you. You can adjust the position using both a percentage or pixel value. To enlarge the image, we'll use the transform scale, which will increase the size of the image by a factor of 1.5. To spin the image, we'll use the transform rotate, and this takes degrees as arguments and operates on all three axes. So now we have 4 possible states including the default state, and that gives us 16 possible combinations to animate. It'd be very cumbersome to define each transition individually, but Angular offers a wildcard option which we can use to apply the transition to every different possible state. So here we apply the wildcard as a 500 millisecond ease. Back in the app, we can now see that each of these 16 combinations will use the 500 millisecond transition. What if you wanted to control the intermediate steps in an animation? You can do this with keyframes. First, make sure you import the key frames method into your component. Then we'll use the key frames as an argument to the animate method inside the transition. Keyframes represent points in time relative to the length of the animation itself. So in this example, we have a 2,000 millisecond transition. So an offset of 0.33 would represent approximately 660 milliseconds. In this example, we're just translating and rotating the image all over the green just to demonstrate how key frames can create nonlinear animations. Back in the app, we can see the image move to the right and then up before reaching its final resting state. Another cool feature about Angular animations is the ability to run callbacks when an animation is either started or finished. In this example, we're just going to console log the animation and its current state. Animation callbacks are really similar to button clicks or any other user event. We simply call the photo state dot start and then fire whatever function we want to fire. Then back in the typescript we just create a function that will handle the console login for us. This is especially useful if you wanna run a sequence of animations in a very choreographed kind of way. The last animation feature I wanna talk about is list animations, which uses 2 features that are new in Angular 4.2. The new query method allows you to select elements that are nested within an animation based on their HTML tag. In this case, We'll use it to query all the images nested within an animation context. Once we've queried those images, we can use stagger to create a delay between each animation of each image creating a shutter like effect. We start by defining the trigger and then the transition we'll just use the wildcard. Then we can query every image that is nested within that trigger. And first, we'll get the images and translate them off the screen. Then we add an animation within the context of stagger, which will stagger each item in the collection by 600 milliseconds. In most cases, you'd make the stagger delay a little bit faster, but I'll keep it slow for this example. In the template, we add the animation trigger to a div passing the length of the collection to it and then we loop over a collection of photos. Because these images are nested within the photo's animation, the query Electr will automatically grab all the images and put them into an array. Back in the app, we see that each image slides into the screen one after the other. That's it for Angular animation basics. If this video helped you, please like and subscribe. And if you wanna support the channel, consider becoming a pro member at angular firebase.com. You'll get access to a free copy of my book as well as free 1 on 1 project consulting. Thanks for watching and I'll see you soon.
In this video, Speaker 0 discusses five new Angular animations, including the importance of Angular's animation module and the use of Angular's Web reassure API. They explain how to import the browser animation module into the Angular version and create a popover, and how to use the media component to create a fade in fade out animation. They also discuss the use of keyframes and the ability to run callbacks when an animation is complete. Finally, they discuss the use of a web template to create a delay between images and a photo.