![]() ![]() To make use of the polyfill we need to add something to our src/app/main.ts anywhere: import 'web-animations-js/web-animations.min' You can also create a blank new project for this app, then you can install the dependencies like this: npm install web-animations-js -save If you don’t install it, your animations might work on your local machine but perhaps not on the devices later. To use web animations we need to install the Angular animations package and also the web animations polyfill so our animations will work in every browser. Of course not super fancy, but this post is more about getting animations for your Ionic app up and running, not who can build the most freaky key frames animation. With the Web Animations API we will build an effect like in the image above. ![]() If you want to learn Ionic with step-by-step video courses, hands-on training projects and a helpful community who has your back, then take a look at the Ionic Academy.Ĭheckout the Ionic Academy Using Web Animations You also need to have the latest version of Ionic set up on your machine. So it’s something in here for everyone! Prerequisiteīefore going through this tutorial you should be familiar with Angular 2+ and the general Ionic concepts. You can find more about Web Animations API in this great post.īesides that we will also add an external packages for animation to our app as an alternative for people who are not so fancy about the first way. In this post we will take a look at how to integrate the Angular way of doing animations by using the Web Animations API. Today we will take look at 2 different but both great ways to easily create Ionic Animations using Angular! One of the most viewed articles on Devdactic is about Animations for Ionic Apps. ![]()
0 Comments
Leave a Reply. |