Hello guys,
I realized Angular 5 animations actually can’t be looped properly. It can be looped but it’s going to be unstable and will not come with a stop button. People are now requesting Google to implement proper loop feature to Angular 6. (https://github.com/angular/angular/issues/20621)
and CSS3 animations can be looped and stopped but when you have many of them going on, it will slow down the whole app. Especially the button triggering all animations will respond very slow. It works but it will degrade user experience when you have 10+ of them.
Then I discovered Web Animations API which is supposed to work on all web browsers.
https://drafts.csswg.org/web-animations/
Has anyone tried this one Ionic 3? and does this work fine?
Angular uses the Web Animations API. Safari’s support is kinda weak, which is why Angular requires a polyfill on Apple phones.
Also, I haven’t tried this, but to iterate 5 times in Angular, can’t you have your flyInOut.done callback call the iterateFiveTimes function that counts a counter down to 0?
1 Like
Yeah, I see. how can you program iteration with callback? is there any working example for this?
I do believe angular animation performs better than CSS3 animations which is kinda chunky when you have a lot going on.
I think Google guys had to implement ‘iteration’ directly to angular 5 browser animations module…I wonder why they didn’t.
My idea is that you use this construction and call a counting function that either does nothing (count is done), or refires the animation. I can’t code and test it right now. But I don’t see off the top of my head why that wouldn’t work. So either it works, or my lack of experience is showing.
https://angular.io/guide/animations#animation-callbacks
1 Like
Honestly, I don’t get a clue on that method. If you get some time, please upload a simple example! that will save so many troubled people with angular animation loops.
But I will try it somehow… thanks.
In theory it makes sense!
By the way, I’m rolling back to CSS3 animations…
I found a way to make things a little better.
I can load animated part as a component element in parent HTML and then use ViewChild to call functions nested in component ts file. It works fine… still I hope Google will add iteration count to angular 6 animation module.
In theory, the api gives you CSS3 plus. But maybe you don’t need the plus, and maybe the plus isn’t implemented well on phones so it is irrelevant. I’ve made some simple animations, but my understanding is mostly “academic,” hence dangerous to plan around. But what the api gets better than CSS3 is that it allows you to manipulate your keyframes – play them faster, slower, etc., so you don’t have to sweat the timing as much. And Angular, in theory, makes even more powerful keyframe manipulation “simple.”
But, bottom line, you might understand the cold reality of this better than I do. You’re in the trenches and I’m just typing on a message board at the moment. But now I’m interested enough to try to build an example, so maybe I’ll join you on the front line.
1 Like
The best method to trigger 10+ CSS3 animations:
Use [ngClass] to add animations to target divs in component with function that is linked from parent HTML using ViewChild.
This makes CSS3 work as smooth as angular animations.
The only downside of CSS3 animations is keyframe using percentage instead of actual time. If you want precise animation, you know it’s best to use millisecond instead of percentage. That’s why I thought Angular animations will do its job better… but angular animations is not yet complete without iteration count.
Although this is working for my current project but maybe I will look into using Green Sock Animation Platform js library. They want to charge you on a monthly basis though.
https://greensock.com/
Thanks for posting that. It’s much simpler than I expected, since you reported concerns on Github about looping in Angular. Do you think the concerns are ill founded, and Angular already has the functionality? * => loopState seems straightforward.
1 Like
I think it would be much better to have ‘iteration-count’ just like CSS3.
This works too although it needs more programming…
I see. The example is for an infinite loop, and what’s missing is “do this X times.”
1 Like
Yes… but my final choice is combination of ngClass, ViewChild & Component, CSS3.
It uses primitive percentage for keyframes but I can use a calculator to find exact value.
and it’s working fine now so I don’t want more headaches…
I built a demo for dynamic iteration, see thread.
1 Like
I know this has already been marked as solved, but for anyone else reading this, you might want to look into using GreenSock. https://greensock.com/docs. I love everything about Angular … except for animations. The underlying Web Animations API is not as performant as I would like (this is a problem on devices), and honestly, I can’t stand the DSL used for Angular animations. GreenSock gives VERY performant. We’ve used it in an AngularJS / ionic1 and an Angular4 / Ionic3 project at work. Works great in both cases.
For more reading on the benefits of GreenSock:
1 Like
Both CSS3 animations and Angular animations will not keep its animation running when their containing angular component is set to hidden from display.
I found they both set their animations to default automatically and there’s no way to work around this issue…
I will try Green Sock Animations Platform as the last resort.
I’m wondering how much change it will make. All these animations platforms are not perfect…
I’ve been switching back and forth between angular animations and css3 animations for weeks.
It’s a good practice.
If you end up trying greensock, there are typings for it.
https://www.npmjs.com/package/@types/greensock
1 Like
Thanks,
By the way, do you know how to keep CSS3 animation running when its containing angular component is hidden?
It looks like there’s no way to do this…
I have a parent HTML file and several components. Components have CSS3 animations and animations should be running even when component is not visible so once a user opens it up, they will see animation progress made.
Angular automatically sets CSS3 animation to its default state when component is not visible and there’s no way to prevent this behavior
What do you mean when you say hidden? Do you mean *ngIf=“false”, visibility: hidden, or display: none?
1 Like
*ngIf=false
I create tab menus that can open up angular components using *ngIf === true or false
When it’s false, component is hidden but that also stops animation… I tried both angular animations and CSS3 but no luck yet.