Angular Browser Animations Module not working

Ionic Framework ionic-v3
1

Hello guys,

I’m trying to use Angular’s Browser Animations Module which has trigger, state, transition.

I properly installed & imported BrowserAnimationsModule on my app.module.ts… and imported properly to Imports.

Whenever I try to use [@trigger]="animationtitle" on html, my app turns into white screen.

Everything works fine on Angular app but not on Ionic…
Why does this happen? is BrowserAnimationsModule not compatible with Ionic?
If so, that’s a huge loss… it can do a whole lot of complicated animations.

2

Works for me, see: https://github.com/Robinyo/big-top/blob/master/src/pages/animations/sliding-entrances/slide-in-left.animation.ts

import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';

export const slideInLeft =
  trigger('slideInLeft', [
      state('in', style({opacity: 1, transform: 'translate3d(0, 0, 0)'})),
      transition('void => *', [
        style({
          opacity: 0,
          transform: 'translate3d(-100%, 0, 0)'
        }),
        animate('1s 200ms ease-in')
      ]),
      transition('* => void', [
        animate('1s 200ms ease-out', style({
          opacity: 0,
          transform: 'translate3d(0, 0, 0)'
        }))
      ])
    ]
  );

See: https://github.com/Robinyo/big-top/blob/master/src/pages/sign-in/sign-in.html

<ion-icon [@slideInUpWithDelay]="'in'" name="ionic" class="app-icon-zoom"></ion-icon>

See: https://github.com/Robinyo/big-top/blob/master/src/pages/sign-in/sign-in.ts

...

import {slideInLeft} from '@pages/animations/sliding-entrances/slide-in-left.animation';
import {slideInUpWithDelay} from '@pages/animations/sliding-entrances/slide-in-up-with-delay.animation';

@IonicPage()
@Component({
  selector: 'page-sign-in',
  templateUrl: './sign-in.html',
  animations: [ slideInLeft, slideInUpWithDelay ]
})

...

sign-in-page-animation

Ref:

1 Like
3

I found the problem…

I had to add this to my page typescript file:

import { Component, trigger,style,transition,animate,keyframes } from '@angular/core';

The main reason I confused is because on Angular 4, you have to add this:

import { trigger, state, style, transition, animate } from '@angular/animations';

But if you add that to Ionic, it will crash and show white screen…
On ionic all these animation properties should be imported from @angular/core

4

Hi @jamesharvey, well you should say if the problem is solved or not. To me, you’re right because Ionic 3 is not yet using Angular 4 and thus, this is not inside the official supported Ionic 3 package.

That being said, if you love trigonometry animations, you can use many classic js projects inside your ionic project for animations, not to mention html5 css3 animations projects like in https://tympanus.net/codrops/.
(full js and css animations).

Have fun with Ionic,

François

1 Like
5

Well the problem is not entirely solved yet.
Thanks for your response.

Is there any way to create a button that can trigger a multiple animation using other js libraries? which one?
CSS3 animation doesn’t do this…

Angular animations is kinda buggy now… I’m trying to create a button that can affect many div’s styles with different transition times.

6

Well @jamesharvey, i’m not a super js frontend coder but it’s possible yes, a button that triggers many animations like i said. The issue is, like i showed with codrops, these kind of animations if triggered at the same time will eat a lot of cpu and gpu (not a problem on desktop computer), but it will probably lag on any smartphone, because trigonometry and smartphone can be slow if no compression in video…

Not sure i’m clear, but it’s a start, françois

1 Like
7

Yes… but I saw other guy had done it on other app and it was working fine.
Anyways, angular animation is working again now.
I will work on it.

Thanks again,

8

as for the rest, it’s not a matter of gpu most smartphones have decent gpu now
but the cpu is a concern for that kind of nice dynamically generated videos, i hope you understand ?

1 Like
9

Yes, I’m trying to change few background color of divs with a click of button but let me see what I can get.

10

And for the rest, yes @jamesharvey some achieve it, you’re totally right, me it’s not my specialty in code, i just see that it seems difficult (i had one 3D card back in the days).
And for now i just hope we see more apps with complex maths or for example simulations of Galileo system (i love space), now we have 10 satellites launched for European Union.

1 Like
11
1 Like
12

That’s good to know but I’m not into digging space science as of yet. I’m making a media player app.
By the way, angular animation is now working so well.
I fixed a few mistakes and now it’s here…
So my app is currently using CSS 3 keyframes, Angular animations at the same time…

13

?

The latest Ionic 3 uses Angular 5.

1 Like
14

angular 5… not 4, sorry.

15

@jamesharvey @SigmundFroyd Yes sorry i put this of european union because i’m very proud (i had family working on eu satellites). Whatever to be serious, some animations in terms of js and css can’t be made with low angular, that was just my point. (i’m kinda expert in front end).

1 Like
16

and to conclude, ionic 3 is not excactly matching what is required in some recent jquery libs or others to put trigonometry as css, or HTML5 as serious browser animations.

1 Like
17

it can even lag as hell with no instructions to use 3d computing of the desktop computer or the smartphone arm cpu/gpu.

1 Like