How to Add Animations To Your Ionic App (2 Different Ways!)

Learn to add awesome animations to your Ionic app by using Angular and CSS!
Join my special Ionic School today: ionicacademy.com/
Video Courses, Project Templates, Community & the Support you deserve to learn Ionic!
#############################
Want to read instead of watch? Here's the full tutorial: devdactic.com/...
Want more tutorials? Here you go! devdactic.com/
Just getting started? Take my 7 Day Ionic Crash Course: ionicacademy.c...
#############################
My Private Daily Vlog: / @solopreneuradventures...
You can also find me
on / schlimmson
on / devdactic
on / simongrimm_
#############################

[@carlesalbertnavedapallares1272]

Thanks for the video!!! :))
Amazing work for the community!!

[@galaxies_dev]

Carles Albert Naveda Pallares thank you so much :)

[@AjoykarmakarReal]

You are great, thanksssssss for this tutorial!

[@adir191]

Hey simon , thank you for awesome tutorial! can you please explain how to make transition when navigate to other page?

[@jhaxpebel]

hi, I have a problem : ERROR TypeError: Cannot read property 'nativeElement' of undefined , I don't understand why

[@gabrielsdsdsd]

Hi, thanks for the video! 😀 I'm implementing the 2º method... If I use the animation in an item inside a grid, the rows below the animated items go up and hide the items while the animation. Do you have any idea of how to resolve this issue? Thanks

[@aomo5293]

Thank you
Morocco

[@bryanrodriguezsiatama1511]

Hi Simon, great video. About a third way, using only css transitrions for example to simple animations, is need polifyll to correctly function in ios browsers as well?

[@atheerahassan5052]

i am getting a StaticInjectError [AnimationService]; NullInjectorError: No provider for AnimationService
how to solve this, sir? :(

[@abirhasanzoha1291]

great tutorial. I have a question in my mind. Can I use angular router animation in ionic?
specificly how can I change ionic page animation(animation when a page pushed)

[@DarwinMedinaJoxieMedina]

Which way is more compatible with ios ? and android phones 4.4 ?

[@rebarius]

Love your Videos!!! Thanks :))))

[@bobthebuilder6715]

Hi Simon and Everyone,
Great content! I'm an ionic developer but I get stuck on creating a solid Ionic 2/3 workflow for quality product development especially when working in teams and we creating an Ionic app. Do you have any workflow suggestions?
For example, at the movement, my workflow is Jtest for unit testing, Airbnb ESLint style, and on our repo we have a Docker container that runs test and builds before we can merge to the production branch but I'm still not sure if this is rock solid because we don't sign the apk file on that is build on the cloud, anyway I just wanna hear your suggestions on a solid workflow for production app for ionic applications

[@shashankb4835]

Lots of thanks! I was looking for some out of the box animation that I could use native with ionic. Dose it works with angular 2 too lol

[@galaxies_dev]

It's for Ionic 2/3 so it should work with Angular 2 I think!

[@TheSILVERVEVO]

hi Simon , please can you make a tutorial about how to send photos from ionic to MySQL php server ? I found an tutorial in your website but it needs update , thanks

[@CrackDeltaMX]

itsSilver you Need to develope an API REST service...

[@DnsMenjivar]

This is the new command to install Angular Animations:
npm i @angular/animations@latest

[@MrMu2sS]

Thanks

[@marwansalem76]

it doesnt work with ionic3
[INFO] Running app-scripts build: --platform android --target cordova
[21:29:37] build dev started ...
[21:29:37] clean started ...
[21:29:37] clean finished in 3 ms
[21:29:37] copy started ...
[21:29:37] transpile started ...
[21:29:43] typescript: D:/EDUMASR/mobile apps/HSC/mobile3/src/pages/posts-page/posts-page.ts, line: 26
Cannot find name 'AnimationBuilder'.
L25: adultpost:boolean;
L26: private animator: AnimationBuilder;
L27: @ViewChild('myElement') myElem;
[21:29:43] typescript: D:/EDUMASR/mobile apps/HSC/mobile3/src/pages/posts-page/posts-page.ts, line: 29
Cannot find name 'AnimationService'.
L29: ing: LoadingController, public actionSheetCtrl: ActionSheetController, animationService: AnimationService) {
Error: Failed to transpile program
at BuildError.Error (native)
at new BuildError (D:\EDUMASR\mobile apps\HSC\mobile3
ode_modules\@ionic\app-scripts\dist\util\errors.js:16:28)
at D:\EDUMASR\mobile apps\HSC\mobile3
ode_modules\@ionic\app-scripts\dist\transpile.js:137:20
at transpileWorker (D:\EDUMASR\mobile apps\HSC\mobile3
ode_modules\@ionic\app-scripts\dist\transpile.js:103:12)
at Object.transpile (D:\EDUMASR\mobile apps\HSC\mobile3
ode_modules\@ionic\app-scripts\dist\transpile.js:61:12)
at buildProject (D:\EDUMASR\mobile apps\HSC\mobile3
ode_modules\@ionic\app-scripts\dist\build.js:97:78)
at D:\EDUMASR\mobile apps\HSC\mobile3
ode_modules\@ionic\app-scripts\dist\build.js:47:16
any suggestion!

[@MrMu2sS]

It works just fine with ionic 3 ! (ng4)
If you can't make it work, that doen't mean that it doesn't wok with ionic3.

[@typingcat]

Voice volume too low.