Learn how to create Angular Animations for mobile devices with HammerJS touch gestures. In this episode, I pack a simple material card full of cool tap and swipe animations. https://angularfirebase.com/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/


Paul's Channel: https://www.youtube.com/channel/UCYJ9O6X1oFt7YGXpfRwrcWg
HammerJS: https://hammerjs.github.io/
Angular Animation: https://angular.io/guide/animations
Edge SW: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/serviceworker/
WebKit SW: https://webkit.org/status/#specification-service-workers
2024-02-04T07:50:28.217Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
6f3c6374-a3bf-4d17-ad73-a43a401d43ac
ece4813574f38e7ac3d90e0f76f84c5ee914316bf8b3fe0706e308237a68f5c2
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In case you haven't heard the good news, both Microsoft Edge and WebKit Safari are now supporting service workers in their preview releases.
This is a huge leap forward and sets up 2018 to be the year of progressive web apps.
With that being said, what I wanna show you today is how to handle touch events that only happen on mobile devices, then use Angular to create animations in response to these events.
As you can see here, we run a different animation on this material card every time the user swipes in a different direction.
If you're new here, make sure to subscribe and I recommend that you follow along with the source code at angularfirebase.com.
And while you're at it, I also recommend checking out Paul Holliday's YouTube channel and all the awesome Angular content he's creating over there.
I'm I'm going to kick this episode off by building a brand new Angular app.
Then we have a couple of dependencies to add, the first one being hammer.
Js, which is used to add support for mobile touch events to your progressive web app, including rotate, pinch, press, pan, tap, and swipe.
Then you can install it in your app by running npm install hammerjs flag save.
Then once installed, we're going to go into the main TS file and make sure to import Hammer.
Js there.
That'll make the events globally available throughout your app.
In this demo, I'm using Angular Material, but that part's completely optional.
You can follow the install instructions on the official repo.
The important part is that you install Angular animations, which is included in the Angular mono repo, so you can just install with npm, and then make sure to include it inside of your app module.
So you should have browser animations module inside of the imports array.
We're going to be modeling our animations after the animate CSS library, which is one of the most popular libraries on GitHub.
The library itself is just a collection of CSS keyframe animations.
So all we have to do is port those over to Angular so we can use it with Angular's browser animations module.
We don't actually need to install this package in our Angular project.
Instead, we're just going to copy and paste CSS key frames over to the Angular animations key frames.
The end result is that we'll be able to trigger animations natively in Angular.
This will give us fine grain control over the animation life cycle, making it much easier to manage the animation state as our app grows more complex.
This can be extremely valuable if you're building something like swipeable Tinder cards or if you just want to optimize the animations for your mobile users.
Now that we have all of our dependencies in place, let's go ahead and create a new component called Hammer Card.
The first thing we'll do is set up the component TypeScript.
So we're going to import the necessary tools from Angular animations.
Then I'm going to import a Keyframes file that has not yet been created, but we're going to do that in the next step.
Then inside the component decorator, we'll go ahead and create an animations array.
And this is where we define each of the animations as well as the animation trigger.
So the trigger is called card animator.
And every time that trigger changes, it will transition to a different state.
So to define a transition, we use the wildcard, which means any state that transitions to wobble will animate in 1,000 milliseconds.
Then we'll tell it to animate with the wobble key frames that we're going to define in that key frames file.
We're going to follow the same exact steps for each of our animations.
I have 6 in total in this demo.
So we can just add those line by line inside of this animation trigger.
After that, we can go into the component and we'll define a variable to hold the animation state.
To trigger an animation, all we have to do is define the animation state as a string that matches one of the animations that we defined above.
To do that, I'll create a method called start animation that takes a state as an argument.
Then I am wrapping it in an if statement, so we don't have 2 animations trying to run at the same time.
And after each animation completes, we want to reset the animation state back to an empty string.
So I'll go ahead and create another method to handle that.
The next step is to define the key frames that we referenced earlier.
So create a new file called key frames TS, and you can put this file wherever you want, and it can be shared throughout your application.
1st, we'll import keyframes and style from Angular animations, and then I'm going to pull up animate CSS side by side so you can see how this is done.
All we're doing in this file is exporting variables that define the key frames that we're going to use in the animation.
Each element in the array is a style that represents a relative point in time.
In the CSS key frames to the right, the relative point in time is the percentage.
But in Angular, it's represented by the offset property in this object.
The basic process is that we convert the percentage to a decimal and add it to the offset property.
And then we're also going to copy and paste over the CSS styles from each keyframe.
It's a somewhat tedious process.
And eventually, Angular is going to have its own CSS parser.
But for now, this is the best way to go about it.
To keep this brief, I'm only gonna show you this first animation here, but you can find all of the animations in the GitHub project for this video.
So.
If we look a little closer at the completed keyframes, you can see we start at 0.2 and then we end at an offset of 0.8.
Keyframes need to be ordered ascending based on their offset, and the last keyframe should be no greater than 1.
If you remember earlier, we set our transition to be 1 1000 milliseconds, so it's going to cycle through these key frames based on that duration of time.
With the key frames in place, let's jump over to the component HTML and start putting this together.
So we start with the Material card.
Then we define the animation trigger by calling at card animator with the animation state.
Then Angular calls a done event when the animation is finished.
So when it's finished, we're going to reset the animation state back to an empty string.
Now we have a whole bunch of Hammer.
Js gesture touch events that we can start playing with.
1st, we'll listen to the swipe left event.
When the user swipes left, we'll call the start animation function and pass it the slide out left animation.
For swipe right, we'll use the zoom out right animation.
Then we'll also add swipe up and swipe down, but these ones are going to need some additional configuration, which we'll get to in the next step.
Then we can go ahead and add the Angular logo and some default text to our card.
Then we'll set up a couple material buttons to trigger animations on a button click or tap with Hammer.
Js.
A tap is similar to a click, but optimized for mobile devices and can provide some additional metadata for creating custom events.
At this point, you can open up Chrome DevTools and run the mobile application emulator, and you should see all the animations running like you would expect.
So that's pretty cool, but I still wanna show you how you can create your own custom events as well as customize the behavior of Hammer.
Js.
The swipe up and swipe down events are disabled by default.
But if we want to enable them, we can import Hammer.
Js into our app module, and then Angular has a hammer gesture config built into platform browser.
You create your own hammer config class, and then you give it an overrides object, which gives you access to the full Hammer JS API.
You can check out all the options in the Hammer docs, but for now, we just need to set the swipe event to direction all.
Then to use this config, we need to go down to providers and tell Angular to use our custom class.
That'll get the swipe up and swipe down events working, but I wanna take this one step further and create my own custom events.
This is a perfect use case for an Angular directive, which which I'm going to call hammer time.
Then to create custom events in Angular, you're going to need host listener, output, and event emitter.
First, we'll use the output decorator on a property called double tap, which is equal to a new event emitter.
And double tap is going to happen whenever the user taps twice on an object.
And then we'll do the same thing for triple tap, which is the same exact thing, but when a user taps 3 times.
To create these custom events, we'll first listen to the main tap event coming from Hammer JS.
And Hammer gives us the tap count for each event.
So we can just wrap that in an if statement, and if the tap count too, then we know that the user has double tapped.
Then inside the if block, we'll call double tap emit this event.
Now the process is exactly the same for triple tap, just looking for the tap count to equal 3.
Now our directive is ready to put to use.
So we'll go back to our component HTML and add the directive to whichever button we want to listen to these custom events.
So you can see here we add another button with the hammer time directive, and then we can listen to the double tap event in parenthesis.
Then we can run the same start animation function and pass whichever animation we wanna use there.
If we go back to our app and tap the button once, you can see nothing happens.
But if we double tap, then it does the Jello animation.
That's just barely scratching the surface of Angular animations and Hammer JS.
If this video helped you, please like and subscribe.
And if you wanna take your app to the next level, consider becoming a pro subscriber at angularfirebase.com.
You'll get access to a support network designed to help you get your app built and shipped into production, as well as a free copy of my book and access to exclusive content every week.
Thanks for watching, and I'll see you soon.

Speaker 0: In case you haven't heard the good news, both Microsoft Edge and WebKit Safari are now supporting service workers in their preview releases. This is a huge leap forward and sets up 2018 to be the year of progressive web apps. With that being said, what I wanna show you today is how to handle touch events that only happen on mobile devices, then use Angular to create animations in response to these events. As you can see here, we run a different animation on this material card every time the user swipes in a different direction. If you're new here, make sure to subscribe and I recommend that you follow along with the source code at angularfirebase.com.

And while you're at it, I also recommend checking out Paul Holliday's YouTube channel and all the awesome Angular content he's creating over there. I'm I'm going to kick this episode off by building a brand new Angular app. Then we have a couple of dependencies to add, the first one being hammer. Js, which is used to add support for mobile touch events to your progressive web app, including rotate, pinch, press, pan, tap, and swipe. Then you can install it in your app by running npm install hammerjs flag save.

Then once installed, we're going to go into the main TS file and make sure to import Hammer. Js there. That'll make the events globally available throughout your app. In this demo, I'm using Angular Material, but that part's completely optional. You can follow the install instructions on the official repo.

The important part is that you install Angular animations, which is included in the Angular mono repo, so you can just install with npm, and then make sure to include it inside of your app module. So you should have browser animations module inside of the imports array. We're going to be modeling our animations after the animate CSS library, which is one of the most popular libraries on GitHub. The library itself is just a collection of CSS keyframe animations. So all we have to do is port those over to Angular so we can use it with Angular's browser animations module.

We don't actually need to install this package in our Angular project. Instead, we're just going to copy and paste CSS key frames over to the Angular animations key frames. The end result is that we'll be able to trigger animations natively in Angular. This will give us fine grain control over the animation life cycle, making it much easier to manage the animation state as our app grows more complex. This can be extremely valuable if you're building something like swipeable Tinder cards or if you just want to optimize the animations for your mobile users.

Now that we have all of our dependencies in place, let's go ahead and create a new component called Hammer Card. The first thing we'll do is set up the component TypeScript. So we're going to import the necessary tools from Angular animations. Then I'm going to import a Keyframes file that has not yet been created, but we're going to do that in the next step. Then inside the component decorator, we'll go ahead and create an animations array.

And this is where we define each of the animations as well as the animation trigger. So the trigger is called card animator. And every time that trigger changes, it will transition to a different state. So to define a transition, we use the wildcard, which means any state that transitions to wobble will animate in 1,000 milliseconds. Then we'll tell it to animate with the wobble key frames that we're going to define in that key frames file.

We're going to follow the same exact steps for each of our animations. I have 6 in total in this demo. So we can just add those line by line inside of this animation trigger. After that, we can go into the component and we'll define a variable to hold the animation state. To trigger an animation, all we have to do is define the animation state as a string that matches one of the animations that we defined above.

To do that, I'll create a method called start animation that takes a state as an argument. Then I am wrapping it in an if statement, so we don't have 2 animations trying to run at the same time. And after each animation completes, we want to reset the animation state back to an empty string. So I'll go ahead and create another method to handle that. The next step is to define the key frames that we referenced earlier.

So create a new file called key frames TS, and you can put this file wherever you want, and it can be shared throughout your application. 1st, we'll import keyframes and style from Angular animations, and then I'm going to pull up animate CSS side by side so you can see how this is done. All we're doing in this file is exporting variables that define the key frames that we're going to use in the animation. Each element in the array is a style that represents a relative point in time. In the CSS key frames to the right, the relative point in time is the percentage.

But in Angular, it's represented by the offset property in this object. The basic process is that we convert the percentage to a decimal and add it to the offset property. And then we're also going to copy and paste over the CSS styles from each keyframe. It's a somewhat tedious process. And eventually, Angular is going to have its own CSS parser.

But for now, this is the best way to go about it. To keep this brief, I'm only gonna show you this first animation here, but you can find all of the animations in the GitHub project for this video. So. If we look a little closer at the completed keyframes, you can see we start at 0.2 and then we end at an offset of 0.8. Keyframes need to be ordered ascending based on their offset, and the last keyframe should be no greater than 1.

If you remember earlier, we set our transition to be 1 1000 milliseconds, so it's going to cycle through these key frames based on that duration of time. With the key frames in place, let's jump over to the component HTML and start putting this together. So we start with the Material card. Then we define the animation trigger by calling at card animator with the animation state. Then Angular calls a done event when the animation is finished.

So when it's finished, we're going to reset the animation state back to an empty string. Now we have a whole bunch of Hammer. Js gesture touch events that we can start playing with. 1st, we'll listen to the swipe left event. When the user swipes left, we'll call the start animation function and pass it the slide out left animation.

For swipe right, we'll use the zoom out right animation. Then we'll also add swipe up and swipe down, but these ones are going to need some additional configuration, which we'll get to in the next step. Then we can go ahead and add the Angular logo and some default text to our card. Then we'll set up a couple material buttons to trigger animations on a button click or tap with Hammer. Js.

A tap is similar to a click, but optimized for mobile devices and can provide some additional metadata for creating custom events. At this point, you can open up Chrome DevTools and run the mobile application emulator, and you should see all the animations running like you would expect. So that's pretty cool, but I still wanna show you how you can create your own custom events as well as customize the behavior of Hammer. Js. The swipe up and swipe down events are disabled by default.

But if we want to enable them, we can import Hammer. Js into our app module, and then Angular has a hammer gesture config built into platform browser. You create your own hammer config class, and then you give it an overrides object, which gives you access to the full Hammer JS API. You can check out all the options in the Hammer docs, but for now, we just need to set the swipe event to direction all. Then to use this config, we need to go down to providers and tell Angular to use our custom class.

That'll get the swipe up and swipe down events working, but I wanna take this one step further and create my own custom events. This is a perfect use case for an Angular directive, which which I'm going to call hammer time. Then to create custom events in Angular, you're going to need host listener, output, and event emitter. First, we'll use the output decorator on a property called double tap, which is equal to a new event emitter. And double tap is going to happen whenever the user taps twice on an object.

And then we'll do the same thing for triple tap, which is the same exact thing, but when a user taps 3 times. To create these custom events, we'll first listen to the main tap event coming from Hammer JS. And Hammer gives us the tap count for each event. So we can just wrap that in an if statement, and if the tap count too, then we know that the user has double tapped. Then inside the if block, we'll call double tap emit this event.

Now the process is exactly the same for triple tap, just looking for the tap count to equal 3. Now our directive is ready to put to use. So we'll go back to our component HTML and add the directive to whichever button we want to listen to these custom events. So you can see here we add another button with the hammer time directive, and then we can listen to the double tap event in parenthesis. Then we can run the same start animation function and pass whichever animation we wanna use there.

If we go back to our app and tap the button once, you can see nothing happens. But if we double tap, then it does the Jello animation. That's just barely scratching the surface of Angular animations and Hammer JS. If this video helped you, please like and subscribe. And if you wanna take your app to the next level, consider becoming a pro subscriber at angularfirebase.com.

You'll get access to a support network designed to help you get your app built and shipped into production, as well as a free copy of my book and access to exclusive content every week. Thanks for watching, and I'll see you soon.
In case you haven't heard the good news, both Microsoft Edge and WebKit Safari are now supporting service workers in their preview releases. This is a huge leap forward and sets up 2018 to be the year of progressive web apps.
With that being said, what I wanna show you today is how to handle touch events that only happen on mobile devices, then use Angular to create animations in response to these events. As you can see here, we run a different animation on this material card every time the user swipes in a different direction. If you're new here, make sure to subscribe and I recommend that you follow along with the source code at angularfirebase.com. And while you're at it, I also recommend checking out Paul Holliday's YouTube channel and all the awesome Angular content he's creating over there. I'm I'm going to kick this episode off by building a brand new Angular app. Then we have a couple of dependencies to add, the first one being hammer.
animation
robotics
youtube
phones
Js, which is used to add support for mobile touch events to your progressive web app, including rotate, pinch, press, pan, tap, and swipe. Then you can install it in your app by running npm install hammerjs flag save. Then once installed, we're going to go into the main TS file and make sure to import Hammer. Js there. That'll make the events globally available throughout your app. In this demo, I'm using Angular Material, but that part's completely optional. You can follow the install instructions on the official repo.
The important part is that you install Angular animations, which is included in the Angular mono repo, so you can just install with npm, and then make sure to include it inside of your app module. So you should have browser animations module inside of the imports array. We're going to be modeling our animations after the animate CSS library, which is one of the most popular libraries on GitHub. The library itself is just a collection of CSS keyframe animations. So all we have to do is port those over to Angular so we can use it with Angular's browser animations module. We don't actually need to install this package in our Angular project. Instead, we're just going to copy and paste CSS key frames over to the Angular animations key frames. The end result is that we'll be able to trigger animations natively in Angular. This will give us fine grain control over the animation life cycle, making it much easier to manage the animation state as our app grows more complex. This can be extremely valuable if you're building something like swipeable Tinder cards or if you just want to optimize the animations for your mobile users. Now that we have all of our dependencies in place, let's go ahead and create a new component called Hammer Card. The first thing we'll do is set up the component TypeScript.
animation
graphic design
robotics
crafts
So we're going to import the necessary tools from Angular animations. Then I'm going to import a Keyframes file that has not yet been created, but we're going to do that in the next step. Then inside the component decorator, we'll go ahead and create an animations array. And this is where we define each of the animations as well as the animation trigger. So the trigger is called card animator. And every time that trigger changes, it will transition to a different state. So to define a transition, we use the wildcard, which means any state that transitions to wobble will animate in 1,000 milliseconds. Then we'll tell it to animate with the wobble key frames that we're going to define in that key frames file. We're going to follow the same exact steps for each of our animations. I have 6 in total in this demo. So we can just add those line by line inside of this animation trigger. After that, we can go into the component and we'll define a variable to hold the animation state. To trigger an animation, all we have to do is define the animation state as a string that matches one of the animations that we defined above. To do that, I'll create a method called start animation that takes a state as an argument. Then I am wrapping it in an if statement, so we don't have 2 animations trying to run at the same time. And after each animation completes, we want to reset the animation state back to an empty string. So I'll go ahead and create another method to handle that. The next step is to define the key frames that we referenced earlier. So create a new file called key frames TS, and you can put this file wherever you want, and it can be shared throughout your application. 1st, we'll import keyframes and style from Angular animations, and then I'm going to pull up animate CSS side by side so you can see how this is done. All we're doing in this file is exporting variables that define the key frames that we're going to use in the animation.
animation
graphic design
Each element in the array is a style that represents a relative point in time. In the CSS key frames to the right, the relative point in time is the percentage. But in Angular, it's represented by the offset property in this object. The basic process is that we convert the percentage to a decimal and add it to the offset property. And then we're also going to copy and paste over the CSS styles from each keyframe.
It's a somewhat tedious process. And eventually, Angular is going to have its own CSS parser. But for now, this is the best way to go about it. To keep this brief, I'm only gonna show you this first animation here, but you can find all of the animations in the GitHub project for this video. So. If we look a little closer at the completed keyframes, you can see we start at 0.2 and then we end at an offset of 0.8.
animation
graphic design
visualization
Keyframes need to be ordered ascending based on their offset, and the last keyframe should be no greater than 1. If you remember earlier, we set our transition to be 1 1000 milliseconds, so it's going to cycle through these key frames based on that duration of time.
With the key frames in place, let's jump over to the component HTML and start putting this together. So we start with the Material card. Then we define the animation trigger by calling at card animator with the animation state. Then Angular calls a done event when the animation is finished. So when it's finished, we're going to reset the animation state back to an empty string. Now we have a whole bunch of Hammer. Js gesture touch events that we can start playing with. 1st, we'll listen to the swipe left event. When the user swipes left, we'll call the start animation function and pass it the slide out left animation. For swipe right, we'll use the zoom out right animation. Then we'll also add swipe up and swipe down, but these ones are going to need some additional configuration, which we'll get to in the next step. Then we can go ahead and add the Angular logo and some default text to our card. Then we'll set up a couple material buttons to trigger animations on a button click or tap with Hammer. Js. A tap is similar to a click, but optimized for mobile devices and can provide some additional metadata for creating custom events. At this point, you can open up Chrome DevTools and run the mobile application emulator, and you should see all the animations running like you would expect.
animation
robotics
So that's pretty cool, but I still wanna show you how you can create your own custom events as well as customize the behavior of Hammer. Js. The swipe up and swipe down events are disabled by default. But if we want to enable them, we can import Hammer. Js into our app module, and then Angular has a hammer gesture config built into platform browser. You create your own hammer config class, and then you give it an overrides object, which gives you access to the full Hammer JS API. You can check out all the options in the Hammer docs, but for now, we just need to set the swipe event to direction all. Then to use this config, we need to go down to providers and tell Angular to use our custom class. That'll get the swipe up and swipe down events working, but I wanna take this one step further and create my own custom events. This is a perfect use case for an Angular directive, which which I'm going to call hammer time. Then to create custom events in Angular, you're going to need host listener, output, and event emitter. First, we'll use the output decorator on a property called double tap, which is equal to a new event emitter. And double tap is going to happen whenever the user taps twice on an object. And then we'll do the same thing for triple tap, which is the same exact thing, but when a user taps 3 times. To create these custom events, we'll first listen to the main tap event coming from Hammer JS. And Hammer gives us the tap count for each event. So we can just wrap that in an if statement, and if the tap count too, then we know that the user has double tapped. Then inside the if block, we'll call double tap emit this event. Now the process is exactly the same for triple tap, just looking for the tap count to equal 3. Now our directive is ready to put to use. So we'll go back to our component HTML and add the directive to whichever button we want to listen to these custom events.
So you can see here we add another button with the hammer time directive, and then we can listen to the double tap event in parenthesis. Then we can run the same start animation function and pass whichever animation we wanna use there. If we go back to our app and tap the button once, you can see nothing happens. But if we double tap, then it does the Jello animation. That's just barely scratching the surface of Angular animations and Hammer JS. If this video helped you, please like and subscribe. And if you wanna take your app to the next level, consider becoming a pro subscriber at angularfirebase.com. You'll get access to a support network designed to help you get your app built and shipped into production, as well as a free copy of my book and access to exclusive content every week. Thanks for watching, and I'll see you soon.
animation
youtube
software
seasons
In case you haven't heard the good news, both Microsoft Edge and WebKit Safari are now supporting service workers in their preview releases. This is a huge leap forward and sets up 2018 to be the year of progressive web apps. With that being said, what I wanna show you today is how to handle touch events that only happen on mobile devices, then use Angular to create animations in response to these events. As you can see here, we run a different animation on this material card every time the user swipes in a different direction. If you're new here, make sure to subscribe and I recommend that you follow along with the source code at angularfirebase.com. And while you're at it, I also recommend checking out Paul Holliday's YouTube channel and all the awesome Angular content he's creating over there. I'm I'm going to kick this episode off by building a brand new Angular app. Then we have a couple of dependencies to add, the first one being hammer. Js, which is used to add support for mobile touch events to your progressive web app, including rotate, pinch, press, pan, tap, and swipe. Then you can install it in your app by running npm install hammerjs flag save. Then once installed, we're going to go into the main TS file and make sure to import Hammer. Js there. That'll make the events globally available throughout your app. In this demo, I'm using Angular Material, but that part's completely optional. You can follow the install instructions on the official repo. The important part is that you install Angular animations, which is included in the Angular mono repo, so you can just install with npm, and then make sure to include it inside of your app module. So you should have browser animations module inside of the imports array. We're going to be modeling our animations after the animate CSS library, which is one of the most popular libraries on GitHub. The library itself is just a collection of CSS keyframe animations. So all we have to do is port those over to Angular so we can use it with Angular's browser animations module. We don't actually need to install this package in our Angular project. Instead, we're just going to copy and paste CSS key frames over to the Angular animations key frames. The end result is that we'll be able to trigger animations natively in Angular. This will give us fine grain control over the animation life cycle, making it much easier to manage the animation state as our app grows more complex. This can be extremely valuable if you're building something like swipeable Tinder cards or if you just want to optimize the animations for your mobile users. Now that we have all of our dependencies in place, let's go ahead and create a new component called Hammer Card. The first thing we'll do is set up the component TypeScript. So we're going to import the necessary tools from Angular animations. Then I'm going to import a Keyframes file that has not yet been created, but we're going to do that in the next step. Then inside the component decorator, we'll go ahead and create an animations array. And this is where we define each of the animations as well as the animation trigger. So the trigger is called card animator. And every time that trigger changes, it will transition to a different state. So to define a transition, we use the wildcard, which means any state that transitions to wobble will animate in 1,000 milliseconds. Then we'll tell it to animate with the wobble key frames that we're going to define in that key frames file. We're going to follow the same exact steps for each of our animations. I have 6 in total in this demo. So we can just add those line by line inside of this animation trigger. After that, we can go into the component and we'll define a variable to hold the animation state. To trigger an animation, all we have to do is define the animation state as a string that matches one of the animations that we defined above. To do that, I'll create a method called start animation that takes a state as an argument. Then I am wrapping it in an if statement, so we don't have 2 animations trying to run at the same time. And after each animation completes, we want to reset the animation state back to an empty string. So I'll go ahead and create another method to handle that. The next step is to define the key frames that we referenced earlier. So create a new file called key frames TS, and you can put this file wherever you want, and it can be shared throughout your application. 1st, we'll import keyframes and style from Angular animations, and then I'm going to pull up animate CSS side by side so you can see how this is done. All we're doing in this file is exporting variables that define the key frames that we're going to use in the animation. Each element in the array is a style that represents a relative point in time. In the CSS key frames to the right, the relative point in time is the percentage. But in Angular, it's represented by the offset property in this object. The basic process is that we convert the percentage to a decimal and add it to the offset property. And then we're also going to copy and paste over the CSS styles from each keyframe. It's a somewhat tedious process. And eventually, Angular is going to have its own CSS parser. But for now, this is the best way to go about it. To keep this brief, I'm only gonna show you this first animation here, but you can find all of the animations in the GitHub project for this video. So. If we look a little closer at the completed keyframes, you can see we start at 0.2 and then we end at an offset of 0.8. Keyframes need to be ordered ascending based on their offset, and the last keyframe should be no greater than 1. If you remember earlier, we set our transition to be 1 1000 milliseconds, so it's going to cycle through these key frames based on that duration of time. With the key frames in place, let's jump over to the component HTML and start putting this together. So we start with the Material card. Then we define the animation trigger by calling at card animator with the animation state. Then Angular calls a done event when the animation is finished. So when it's finished, we're going to reset the animation state back to an empty string. Now we have a whole bunch of Hammer. Js gesture touch events that we can start playing with. 1st, we'll listen to the swipe left event. When the user swipes left, we'll call the start animation function and pass it the slide out left animation. For swipe right, we'll use the zoom out right animation. Then we'll also add swipe up and swipe down, but these ones are going to need some additional configuration, which we'll get to in the next step. Then we can go ahead and add the Angular logo and some default text to our card. Then we'll set up a couple material buttons to trigger animations on a button click or tap with Hammer. Js. A tap is similar to a click, but optimized for mobile devices and can provide some additional metadata for creating custom events. At this point, you can open up Chrome DevTools and run the mobile application emulator, and you should see all the animations running like you would expect. So that's pretty cool, but I still wanna show you how you can create your own custom events as well as customize the behavior of Hammer. Js. The swipe up and swipe down events are disabled by default. But if we want to enable them, we can import Hammer. Js into our app module, and then Angular has a hammer gesture config built into platform browser. You create your own hammer config class, and then you give it an overrides object, which gives you access to the full Hammer JS API. You can check out all the options in the Hammer docs, but for now, we just need to set the swipe event to direction all. Then to use this config, we need to go down to providers and tell Angular to use our custom class. That'll get the swipe up and swipe down events working, but I wanna take this one step further and create my own custom events. This is a perfect use case for an Angular directive, which which I'm going to call hammer time. Then to create custom events in Angular, you're going to need host listener, output, and event emitter. First, we'll use the output decorator on a property called double tap, which is equal to a new event emitter. And double tap is going to happen whenever the user taps twice on an object. And then we'll do the same thing for triple tap, which is the same exact thing, but when a user taps 3 times. To create these custom events, we'll first listen to the main tap event coming from Hammer JS. And Hammer gives us the tap count for each event. So we can just wrap that in an if statement, and if the tap count too, then we know that the user has double tapped. Then inside the if block, we'll call double tap emit this event. Now the process is exactly the same for triple tap, just looking for the tap count to equal 3. Now our directive is ready to put to use. So we'll go back to our component HTML and add the directive to whichever button we want to listen to these custom events. So you can see here we add another button with the hammer time directive, and then we can listen to the double tap event in parenthesis. Then we can run the same start animation function and pass whichever animation we wanna use there. If we go back to our app and tap the button once, you can see nothing happens. But if we double tap, then it does the Jello animation. That's just barely scratching the surface of Angular animations and Hammer JS. If this video helped you, please like and subscribe. And if you wanna take your app to the next level, consider becoming a pro subscriber at angularfirebase.com. You'll get access to a support network designed to help you get your app built and shipped into production, as well as a free copy of my book and access to exclusive content every week. Thanks for watching, and I'll see you soon.
In
in
case
case
you
you
haven't
haven't
heard
heard
the
the
good
good
news,
news
both
both
Microsoft
microsoft
Edge
edge
and
and
WebKit
webkit
Safari
safari
are
are
now
now
supporting
supporting
service
service
workers
workers
in
in
their
their
preview
preview
releases.
releases
This
this
is
is
a
a
huge
huge
leap
leap
forward
forward
and
and
sets
sets
up
up
2018
2018
to
to
be
be
the
the
year
year
of
of
progressive
progressive
web
web
apps.
apps
With
with
that
that
being
being
said,
said
what
what
I
i
wanna
wanna
show
show
you
you
today
today
is
is
how
how
to
to
handle
handle
touch
touch
events
events
that
that
only
only
happen
happen
on
on
mobile
mobile
devices,
devices
then
then
use
use
Angular
angular
to
to
create
create
animations
animations
in
in
response
response
to
to
these
these
events.
events
As
as
you
you
can
can
see
see
here,
here
we
we
run
run
a
a
different
different
animation
animation
on
on
this
this
material
material
card
card
every
every
time
time
the
the
user
user
swipes
swipes
in
in
a
a
different
different
direction.
direction
If
if
you're
you're
new
new
here,
here
make
make
sure
sure
to
to
subscribe
subscribe
and
and
I
i
recommend
recommend
that
that
you
you
follow
follow
along
along
with
with
the
the
source
source
code
code
at
at
angularfirebase.com.
angularfirebase.com
And
and
while
while
you're
you're
at
at
it,
it
I
i
also
also
recommend
recommend
checking
checking
out
out
Paul
paul
Holliday's
holliday's
YouTube
youtube
channel
channel
and
and
all
all
the
the
awesome
awesome
Angular
angular
content
content
he's
he's
creating
creating
over
over
there.
there
I'm
i'm
I'm
i'm
going
going
to
to
kick
kick
this
this
episode
episode
off
off
by
by
building
building
a
a
brand
brand
new
new
Angular
angular
app.
app
Then
then
we
we
have
have
a
a
couple
couple
of
of
dependencies
dependencies
to
to
add,
add
the
the
first
first
one
one
being
being
hammer.
hammer
Js,
js
which
which
is
is
used
used
to
to
add
add
support
support
for
for
mobile
mobile
touch
touch
events
events
to
to
your
your
progressive
progressive
web
web
app,
app
including
including
rotate,
rotate
pinch,
pinch
press,
press
pan,
pan
tap,
tap
and
and
swipe.
swipe
Then
then
you
you
can
can
install
install
it
it
in
in
your
your
app
app
by
by
running
running
npm
npm
install
install
hammerjs
hammerjs
flag
flag
save.
save
Then
then
once
once
installed,
installed
we're
we're
going
going
to
to
go
go
into
into
the
the
main
main
TS
ts
file
file
and
and
make
make
sure
sure
to
to
import
import
Hammer.
hammer
Js
js
there.
there
That'll
that'll
make
make
the
the
events
events
globally
globally
available
available
throughout
throughout
your
your
app.
app
In
in
this
this
demo,
demo
I'm
i'm
using
using
Angular
angular
Material,
material
but
but
that
that
part's
part's
completely
completely
optional.
optional
You
you
can
can
follow
follow
the
the
install
install
instructions
instructions
on
on
the
the
official
official
repo.
repo
The
the
important
important
part
part
is
is
that
that
you
you
install
install
Angular
angular
animations,
animations
which
which
is
is
included
included
in
in
the
the
Angular
angular
mono
mono
repo,
repo
so
so
you
you
can
can
just
just
install
install
with
with
npm,
npm
and
and
then
then
make
make
sure
sure
to
to
include
include
it
it
inside
inside
of
of
your
your
app
app
module.
module
So
so
you
you
should
should
have
have
browser
browser
animations
animations
module
module
inside
inside
of
of
the
the
imports
imports
array.
array
We're
we're
going
going
to
to
be
be
modeling
modeling
our
our
animations
animations
after
after
the
the
animate
animate
CSS
css
library,
library
which
which
is
is
one
one
of
of
the
the
most
most
popular
popular
libraries
libraries
on
on
GitHub.
github
The
the
library
library
itself
itself
is
is
just
just
a
a
collection
collection
of
of
CSS
css
keyframe
keyframe
animations.
animations
So
so
all
all
we
we
have
have
to
to
do
do
is
is
port
port
those
those
over
over
to
to
Angular
angular
so
so
we
we
can
can
use
use
it
it
with
with
Angular's
angular's
browser
browser
animations
animations
module.
module
We
we
don't
don't
actually
actually
need
need
to
to
install
install
this
this
package
package
in
in
our
our
Angular
angular
project.
project
Instead,
instead
we're
we're
just
just
going
going
to
to
copy
copy
and
and
paste
paste
CSS
css
key
key
frames
frames
over
over
to
to
the
the
Angular
angular
animations
animations
key
key
frames.
frames
The
the
end
end
result
result
is
is
that
that
we'll
we'll
be
be
able
able
to
to
trigger
trigger
animations
animations
natively
natively
in
in
Angular.
angular
This
this
will
will
give
give
us
us
fine
fine
grain
grain
control
control
over
over
the
the
animation
animation
life
life
cycle,
cycle
making
making
it
it
much
much
easier
easier
to
to
manage
manage
the
the
animation
animation
state
state
as
as
our
our
app
app
grows
grows
more
more
complex.
complex
This
this
can
can
be
be
extremely
extremely
valuable
valuable
if
if
you're
you're
building
building
something
something
like
like
swipeable
swipeable
Tinder
tinder
cards
cards
or
or
if
if
you
you
just
just
want
want
to
to
optimize
optimize
the
the
animations
animations
for
for
your
your
mobile
mobile
users.
users
Now
now
that
that
we
we
have
have
all
all
of
of
our
our
dependencies
dependencies
in
in
place,
place
let's
let's
go
go
ahead
ahead
and
and
create
create
a
a
new
new
component
component
called
called
Hammer
hammer
Card.
card
The
the
first
first
thing
thing
we'll
we'll
do
do
is
is
set
set
up
up
the
the
component
component
TypeScript.
typescript
So
so
we're
we're
going
going
to
to
import
import
the
the
necessary
necessary
tools
tools
from
from
Angular
angular
animations.
animations
Then
then
I'm
i'm
going
going
to
to
import
import
a
a
Keyframes
keyframes
file
file
that
that
has
has
not
not
yet
yet
been
been
created,
created
but
but
we're
we're
going
going
to
to
do
do
that
that
in
in
the
the
next
next
step.
step
Then
then
inside
inside
the
the
component
component
decorator,
decorator
we'll
we'll
go
go
ahead
ahead
and
and
create
create
an
an
animations
animations
array.
array
And
and
this
this
is
is
where
where
we
we
define
define
each
each
of
of
the
the
animations
animations
as
as
well
well
as
as
the
the
animation
animation
trigger.
trigger
So
so
the
the
trigger
trigger
is
is
called
called
card
card
animator.
animator
And
and
every
every
time
time
that
that
trigger
trigger
changes,
changes
it
it
will
will
transition
transition
to
to
a
a
different
different
state.
state
So
so
to
to
define
define
a
a
transition,
transition
we
we
use
use
the
the
wildcard,
wildcard
which
which
means
means
any
any
state
state
that
that
transitions
transitions
to
to
wobble
wobble
will
will
animate
animate
in
in
1,000
1,000
milliseconds.
milliseconds
Then
then
we'll
we'll
tell
tell
it
it
to
to
animate
animate
with
with
the
the
wobble
wobble
key
key
frames
frames
that
that
we're
we're
going
going
to
to
define
define
in
in
that
that
key
key
frames
frames
file.
file
We're
we're
going
going
to
to
follow
follow
the
the
same
same
exact
exact
steps
steps
for
for
each
each
of
of
our
our
animations.
animations
I
i
have
have
6
6
in
in
total
total
in
in
this
this
demo.
demo
So
so
we
we
can
can
just
just
add
add
those
those
line
line
by
by
line
line
inside
inside
of
of
this
this
animation
animation
trigger.
trigger
After
after
that,
that
we
we
can
can
go
go
into
into
the
the
component
component
and
and
we'll
we'll
define
define
a
a
variable
variable
to
to
hold
hold
the
the
animation
animation
state.
state
To
to
trigger
trigger
an
an
animation,
animation
all
all
we
we
have
have
to
to
do
do
is
is
define
define
the
the
animation
animation
state
state
as
as
a
a
string
string
that
that
matches
matches
one
one
of
of
the
the
animations
animations
that
that
we
we
defined
defined
above.
above
To
to
do
do
that,
that
I'll
i'll
create
create
a
a
method
method
called
called
start
start
animation
animation
that
that
takes
takes
a
a
state
state
as
as
an
an
argument.
argument
Then
then
I
i
am
am
wrapping
wrapping
it
it
in
in
an
an
if
if
statement,
statement
so
so
we
we
don't
don't
have
have
2
2
animations
animations
trying
trying
to
to
run
run
at
at
the
the
same
same
time.
time
And
and
after
after
each
each
animation
animation
completes,
completes
we
we
want
want
to
to
reset
reset
the
the
animation
animation
state
state
back
back
to
to
an
an
empty
empty
string.
string
So
so
I'll
i'll
go
go
ahead
ahead
and
and
create
create
another
another
method
method
to
to
handle
handle
that.
that
The
the
next
next
step
step
is
is
to
to
define
define
the
the
key
key
frames
frames
that
that
we
we
referenced
referenced
earlier.
earlier
So
so
create
create
a
a
new
new
file
file
called
called
key
key
frames
frames
TS,
ts
and
and
you
you
can
can
put
put
this
this
file
file
wherever
wherever
you
you
want,
want
and
and
it
it
can
can
be
be
shared
shared
throughout
throughout
your
your
application.
application
1st,
1st
we'll
we'll
import
import
keyframes
keyframes
and
and
style
style
from
from
Angular
angular
animations,
animations
and
and
then
then
I'm
i'm
going
going
to
to
pull
pull
up
up
animate
animate
CSS
css
side
side
by
by
side
side
so
so
you
you
can
can
see
see
how
how
this
this
is
is
done.
done
All
all
we're
we're
doing
doing
in
in
this
this
file
file
is
is
exporting
exporting
variables
variables
that
that
define
define
the
the
key
key
frames
frames
that
that
we're
we're
going
going
to
to
use
use
in
in
the
the
animation.
animation
Each
each
element
element
in
in
the
the
array
array
is
is
a
a
style
style
that
that
represents
represents
a
a
relative
relative
point
point
in
in
time.
time
In
in
the
the
CSS
css
key
key
frames
frames
to
to
the
the
right,
right
the
the
relative
relative
point
point
in
in
time
time
is
is
the
the
percentage.
percentage
But
but
in
in
Angular,
angular
it's
it's
represented
represented
by
by
the
the
offset
offset
property
property
in
in
this
this
object.
object
The
the
basic
basic
process
process
is
is
that
that
we
we
convert
convert
the
the
percentage
percentage
to
to
a
a
decimal
decimal
and
and
add
add
it
it
to
to
the
the
offset
offset
property.
property
And
and
then
then
we're
we're
also
also
going
going
to
to
copy
copy
and
and
paste
paste
over
over
the
the
CSS
css
styles
styles
from
from
each
each
keyframe.
keyframe
It's
it's
a
a
somewhat
somewhat
tedious
tedious
process.
process
And
and
eventually,
eventually
Angular
angular
is
is
going
going
to
to
have
have
its
its
own
own
CSS
css
parser.
parser
But
but
for
for
now,
now
this
this
is
is
the
the
best
best
way
way
to
to
go
go
about
about
it.
it
To
to
keep
keep
this
this
brief,
brief
I'm
i'm
only
only
gonna
gonna
show
show
you
you
this
this
first
first
animation
animation
here,
here
but
but
you
you
can
can
find
find
all
all
of
of
the
the
animations
animations
in
in
the
the
GitHub
github
project
project
for
for
this
this
video.
video
So.
so
If
if
we
we
look
look
a
a
little
little
closer
closer
at
at
the
the
completed
completed
keyframes,
keyframes
you
you
can
can
see
see
we
we
start
start
at
at
0.2
0.2
and
and
then
then
we
we
end
end
at
at
an
an
offset
offset
of
of
0.8.
0.8
Keyframes
keyframes
need
need
to
to
be
be
ordered
ordered
ascending
ascending
based
based
on
on
their
their
offset,
offset
and
and
the
the
last
last
keyframe
keyframe
should
should
be
be
no
no
greater
greater
than
than
1.
1
If
if
you
you
remember
remember
earlier,
earlier
we
we
set
set
our
our
transition
transition
to
to
be
be
1
1
1000
1000
milliseconds,
milliseconds
so
so
it's
it's
going
going
to
to
cycle
cycle
through
through
these
these
key
key
frames
frames
based
based
on
on
that
that
duration
duration
of
of
time.
time
With
with
the
the
key
key
frames
frames
in
in
place,
place
let's
let's
jump
jump
over
over
to
to
the
the
component
component
HTML
html
and
and
start
start
putting
putting
this
this
together.
together
So
so
we
we
start
start
with
with
the
the
Material
material
card.
card
Then
then
we
we
define
define
the
the
animation
animation
trigger
trigger
by
by
calling
calling
at
at
card
card
animator
animator
with
with
the
the
animation
animation
state.
state
Then
then
Angular
angular
calls
calls
a
a
done
done
event
event
when
when
the
the
animation
animation
is
is
finished.
finished
So
so
when
when
it's
it's
finished,
finished
we're
we're
going
going
to
to
reset
reset
the
the
animation
animation
state
state
back
back
to
to
an
an
empty
empty
string.
string
Now
now
we
we
have
have
a
a
whole
whole
bunch
bunch
of
of
Hammer.
hammer
Js
js
gesture
gesture
touch
touch
events
events
that
that
we
we
can
can
start
start
playing
playing
with.
with
1st,
1st
we'll
we'll
listen
listen
to
to
the
the
swipe
swipe
left
left
event.
event
When
when
the
the
user
user
swipes
swipes
left,
left
we'll
we'll
call
call
the
the
start
start
animation
animation
function
function
and
and
pass
pass
it
it
the
the
slide
slide
out
out
left
left
animation.
animation
For
for
swipe
swipe
right,
right
we'll
we'll
use
use
the
the
zoom
zoom
out
out
right
right
animation.
animation
Then
then
we'll
we'll
also
also
add
add
swipe
swipe
up
up
and
and
swipe
swipe
down,
down
but
but
these
these
ones
ones
are
are
going
going
to
to
need
need
some
some
additional
additional
configuration,
configuration
which
which
we'll
we'll
get
get
to
to
in
in
the
the
next
next
step.
step
Then
then
we
we
can
can
go
go
ahead
ahead
and
and
add
add
the
the
Angular
angular
logo
logo
and
and
some
some
default
default
text
text
to
to
our
our
card.
card
Then
then
we'll
we'll
set
set
up
up
a
a
couple
couple
material
material
buttons
buttons
to
to
trigger
trigger
animations
animations
on
on
a
a
button
button
click
click
or
or
tap
tap
with
with
Hammer.
hammer
Js.
js
A
a
tap
tap
is
is
similar
similar
to
to
a
a
click,
click
but
but
optimized
optimized
for
for
mobile
mobile
devices
devices
and
and
can
can
provide
provide
some
some
additional
additional
metadata
metadata
for
for
creating
creating
custom
custom
events.
events
At
at
this
this
point,
point
you
you
can
can
open
open
up
up
Chrome
chrome
DevTools
devtools
and
and
run
run
the
the
mobile
mobile
application
application
emulator,
emulator
and
and
you
you
should
should
see
see
all
all
the
the
animations
animations
running
running
like
like
you
you
would
would
expect.
expect
So
so
that's
that's
pretty
pretty
cool,
cool
but
but
I
i
still
still
wanna
wanna
show
show
you
you
how
how
you
you
can
can
create
create
your
your
own
own
custom
custom
events
events
as
as
well
well
as
as
customize
customize
the
the
behavior
behavior
of
of
Hammer.
hammer
Js.
js
The
the
swipe
swipe
up
up
and
and
swipe
swipe
down
down
events
events
are
are
disabled
disabled
by
by
default.
default
But
but
if
if
we
we
want
want
to
to
enable
enable
them,
them
we
we
can
can
import
import
Hammer.
hammer
Js
js
into
into
our
our
app
app
module,
module
and
and
then
then
Angular
angular
has
has
a
a
hammer
hammer
gesture
gesture
config
config
built
built
into
into
platform
platform
browser.
browser
You
you
create
create
your
your
own
own
hammer
hammer
config
config
class,
class
and
and
then
then
you
you
give
give
it
it
an
an
overrides
overrides
object,
object
which
which
gives
gives
you
you
access
access
to
to
the
the
full
full
Hammer
hammer
JS
js
API.
api
You
you
can
can
check
check
out
out
all
all
the
the
options
options
in
in
the
the
Hammer
hammer
docs,
docs
but
but
for
for
now,
now
we
we
just
just
need
need
to
to
set
set
the
the
swipe
swipe
event
event
to
to
direction
direction
all.
all
Then
then
to
to
use
use
this
this
config,
config
we
we
need
need
to
to
go
go
down
down
to
to
providers
providers
and
and
tell
tell
Angular
angular
to
to
use
use
our
our
custom
custom
class.
class
That'll
that'll
get
get
the
the
swipe
swipe
up
up
and
and
swipe
swipe
down
down
events
events
working,
working
but
but
I
i
wanna
wanna
take
take
this
this
one
one
step
step
further
further
and
and
create
create
my
my
own
own
custom
custom
events.
events
This
this
is
is
a
a
perfect
perfect
use
use
case
case
for
for
an
an
Angular
angular
directive,
directive
which
which
which
which
I'm
i'm
going
going
to
to
call
call
hammer
hammer
time.
time
Then
then
to
to
create
create
custom
custom
events
events
in
in
Angular,
angular
you're
you're
going
going
to
to
need
need
host
host
listener,
listener
output,
output
and
and
event
event
emitter.
emitter
First,
first
we'll
we'll
use
use
the
the
output
output
decorator
decorator
on
on
a
a
property
property
called
called
double
double
tap,
tap
which
which
is
is
equal
equal
to
to
a
a
new
new
event
event
emitter.
emitter
And
and
double
double
tap
tap
is
is
going
going
to
to
happen
happen
whenever
whenever
the
the
user
user
taps
taps
twice
twice
on
on
an
an
object.
object
And
and
then
then
we'll
we'll
do
do
the
the
same
same
thing
thing
for
for
triple
triple
tap,
tap
which
which
is
is
the
the
same
same
exact
exact
thing,
thing
but
but
when
when
a
a
user
user
taps
taps
3
3
times.
times
To
to
create
create
these
these
custom
custom
events,
events
we'll
we'll
first
first
listen
listen
to
to
the
the
main
main
tap
tap
event
event
coming
coming
from
from
Hammer
hammer
JS.
js
And
and
Hammer
hammer
gives
gives
us
us
the
the
tap
tap
count
count
for
for
each
each
event.
event
So
so
we
we
can
can
just
just
wrap
wrap
that
that
in
in
an
an
if
if
statement,
statement
and
and
if
if
the
the
tap
tap
count
count
too,
too
then
then
we
we
know
know
that
that
the
the
user
user
has
has
double
double
tapped.
tapped
Then
then
inside
inside
the
the
if
if
block,
block
we'll
we'll
call
call
double
double
tap
tap
emit
emit
this
this
event.
event
Now
now
the
the
process
process
is
is
exactly
exactly
the
the
same
same
for
for
triple
triple
tap,
tap
just
just
looking
looking
for
for
the
the
tap
tap
count
count
to
to
equal
equal
3.
3
Now
now
our
our
directive
directive
is
is
ready
ready
to
to
put
put
to
to
use.
use
So
so
we'll
we'll
go
go
back
back
to
to
our
our
component
component
HTML
html
and
and
add
add
the
the
directive
directive
to
to
whichever
whichever
button
button
we
we
want
want
to
to
listen
listen
to
to
these
these
custom
custom
events.
events
So
so
you
you
can
can
see
see
here
here
we
we
add
add
another
another
button
button
with
with
the
the
hammer
hammer
time
time
directive,
directive
and
and
then
then
we
we
can
can
listen
listen
to
to
the
the
double
double
tap
tap
event
event
in
in
parenthesis.
parenthesis
Then
then
we
we
can
can
run
run
the
the
same
same
start
start
animation
animation
function
function
and
and
pass
pass
whichever
whichever
animation
animation
we
we
wanna
wanna
use
use
there.
there
If
if
we
we
go
go
back
back
to
to
our
our
app
app
and
and
tap
tap
the
the
button
button
once,
once
you
you
can
can
see
see
nothing
nothing
happens.
happens
But
but
if
if
we
we
double
double
tap,
tap
then
then
it
it
does
does
the
the
Jello
jello
animation.
animation
That's
that's
just
just
barely
barely
scratching
scratching
the
the
surface
surface
of
of
Angular
angular
animations
animations
and
and
Hammer
hammer
JS.
js
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
take
take
your
your
app
app
to
to
the
the
next
next
level,
level
consider
consider
becoming
becoming
a
a
pro
pro
subscriber
subscriber
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
access
access
to
to
a
a
support
support
network
network
designed
designed
to
to
help
help
you
you
get
get
your
your
app
app
built
built
and
and
shipped
shipped
into
into
production,
production
as
as
well
well
as
as
a
a
free
free
copy
copy
of
of
my
my
book
book
and
and
access
access
to
to
exclusive
exclusive
content
content
every
every
week.
week
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
The speakers discuss upcoming web apps and recommend supporting service workers on Microsoft Edge and Safari, building brand new Angular app, and creating a new Angular webpage. They also explain how to optimize the animations for mobile users, creating a new component for animation, and creating custom keyframes for Angular. The process of creating custom keyframes and events is emphasized, including the use of a material card, key frame settings, and the use of a Angular logo and default text. Custom events and support networks are also recommended.
Swipe, Tap, Pinch - HammerJS + Angular Animations
In case you haven't heard the good news, both Microsoft Edge and WebKit Safari are now supporting service workers in their preview releases. This is a huge leap forward and sets up 2018 to be the year of progressive web apps. With that being said, what I wanna show you today is how to handle touch events that only happen on mobile devices, then use Angular to create animations in response to these events. As you can see here, we run a different animation on this material card every time the user swipes in a different direction. If you're new here, make sure to subscribe and I recommend that you follow along with the source code at angularfirebase.com. And while you're at it, I also recommend checking out Paul Holliday's YouTube channel and all the awesome Angular content he's creating over there. I'm I'm going to kick this episode off by building a brand new Angular app. Then we have a couple of dependencies to add, the first one being hammer. Js, which is used to add support for mobile touch events to your progressive web app, including rotate, pinch, press, pan, tap, and swipe. Then you can install it in your app by running npm install hammerjs flag save. Then once installed, we're going to go into the main TS file and make sure to import Hammer. Js there. That'll make the events globally available throughout your app. In this demo, I'm using Angular Material, but that part's completely optional. You can follow the install instructions on the official repo. The important part is that you install Angular animations, which is included in the Angular mono repo, so you can just install with npm, and then make sure to include it inside of your app module. So you should have browser animations module inside of the imports array. We're going to be modeling our animations after the animate CSS library, which is one of the most popular libraries on GitHub. The library itself is just a collection of CSS keyframe animations. So all we have to do is port those over to Angular so we can use it with Angular's browser animations module. We don't actually need to install this package in our Angular project. Instead, we're just going to copy and paste CSS key frames over to the Angular animations key frames. The end result is that we'll be able to trigger animations natively in Angular. This will give us fine grain control over the animation life cycle, making it much easier to manage the animation state as our app grows more complex. This can be extremely valuable if you're building something like swipeable Tinder cards or if you just want to optimize the animations for your mobile users. Now that we have all of our dependencies in place, let's go ahead and create a new component called Hammer Card. The first thing we'll do is set up the component TypeScript. So we're going to import the necessary tools from Angular animations. Then I'm going to import a Keyframes file that has not yet been created, but we're going to do that in the next step. Then inside the component decorator, we'll go ahead and create an animations array. And this is where we define each of the animations as well as the animation trigger. So the trigger is called card animator. And every time that trigger changes, it will transition to a different state. So to define a transition, we use the wildcard, which means any state that transitions to wobble will animate in 1,000 milliseconds. Then we'll tell it to animate with the wobble key frames that we're going to define in that key frames file. We're going to follow the same exact steps for each of our animations. I have 6 in total in this demo. So we can just add those line by line inside of this animation trigger. After that, we can go into the component and we'll define a variable to hold the animation state. To trigger an animation, all we have to do is define the animation state as a string that matches one of the animations that we defined above. To do that, I'll create a method called start animation that takes a state as an argument. Then I am wrapping it in an if statement, so we don't have 2 animations trying to run at the same time. And after each animation completes, we want to reset the animation state back to an empty string. So I'll go ahead and create another method to handle that. The next step is to define the key frames that we referenced earlier. So create a new file called key frames TS, and you can put this file wherever you want, and it can be shared throughout your application. 1st, we'll import keyframes and style from Angular animations, and then I'm going to pull up animate CSS side by side so you can see how this is done. All we're doing in this file is exporting variables that define the key frames that we're going to use in the animation. Each element in the array is a style that represents a relative point in time. In the CSS key frames to the right, the relative point in time is the percentage. But in Angular, it's represented by the offset property in this object. The basic process is that we convert the percentage to a decimal and add it to the offset property. And then we're also going to copy and paste over the CSS styles from each keyframe. It's a somewhat tedious process. And eventually, Angular is going to have its own CSS parser. But for now, this is the best way to go about it. To keep this brief, I'm only gonna show you this first animation here, but you can find all of the animations in the GitHub project for this video. So. If we look a little closer at the completed keyframes, you can see we start at 0.2 and then we end at an offset of 0.8. Keyframes need to be ordered ascending based on their offset, and the last keyframe should be no greater than 1. If you remember earlier, we set our transition to be 1 1000 milliseconds, so it's going to cycle through these key frames based on that duration of time. With the key frames in place, let's jump over to the component HTML and start putting this together. So we start with the Material card. Then we define the animation trigger by calling at card animator with the animation state. Then Angular calls a done event when the animation is finished. So when it's finished, we're going to reset the animation state back to an empty string. Now we have a whole bunch of Hammer. Js gesture touch events that we can start playing with. 1st, we'll listen to the swipe left event. When the user swipes left, we'll call the start animation function and pass it the slide out left animation. For swipe right, we'll use the zoom out right animation. Then we'll also add swipe up and swipe down, but these ones are going to need some additional configuration, which we'll get to in the next step. Then we can go ahead and add the Angular logo and some default text to our card. Then we'll set up a couple material buttons to trigger animations on a button click or tap with Hammer. Js. A tap is similar to a click, but optimized for mobile devices and can provide some additional metadata for creating custom events. At this point, you can open up Chrome DevTools and run the mobile application emulator, and you should see all the animations running like you would expect. So that's pretty cool, but I still wanna show you how you can create your own custom events as well as customize the behavior of Hammer. Js. The swipe up and swipe down events are disabled by default. But if we want to enable them, we can import Hammer. Js into our app module, and then Angular has a hammer gesture config built into platform browser. You create your own hammer config class, and then you give it an overrides object, which gives you access to the full Hammer JS API. You can check out all the options in the Hammer docs, but for now, we just need to set the swipe event to direction all. Then to use this config, we need to go down to providers and tell Angular to use our custom class. That'll get the swipe up and swipe down events working, but I wanna take this one step further and create my own custom events. This is a perfect use case for an Angular directive, which which I'm going to call hammer time. Then to create custom events in Angular, you're going to need host listener, output, and event emitter. First, we'll use the output decorator on a property called double tap, which is equal to a new event emitter. And double tap is going to happen whenever the user taps twice on an object. And then we'll do the same thing for triple tap, which is the same exact thing, but when a user taps 3 times. To create these custom events, we'll first listen to the main tap event coming from Hammer JS. And Hammer gives us the tap count for each event. So we can just wrap that in an if statement, and if the tap count too, then we know that the user has double tapped. Then inside the if block, we'll call double tap emit this event. Now the process is exactly the same for triple tap, just looking for the tap count to equal 3. Now our directive is ready to put to use. So we'll go back to our component HTML and add the directive to whichever button we want to listen to these custom events. So you can see here we add another button with the hammer time directive, and then we can listen to the double tap event in parenthesis. Then we can run the same start animation function and pass whichever animation we wanna use there. If we go back to our app and tap the button once, you can see nothing happens. But if we double tap, then it does the Jello animation. That's just barely scratching the surface of Angular animations and Hammer JS. If this video helped you, please like and subscribe. And if you wanna take your app to the next level, consider becoming a pro subscriber at angularfirebase.com. You'll get access to a support network designed to help you get your app built and shipped into production, as well as a free copy of my book and access to exclusive content every week. Thanks for watching, and I'll see you soon.
The speakers discuss upcoming web apps and recommend supporting service workers on Microsoft Edge and Safari, building brand new Angular app, and creating a new Angular webpage. They also explain how to optimize the animations for mobile users, creating a new component for animation, and creating custom keyframes for Angular. The process of creating custom keyframes and events is emphasized, including the use of a material card, key frame settings, and the use of a Angular logo and default text. Custom events and support networks are also recommended.