filipows / angular-animations Goto Github PK
View Code? Open in Web Editor NEW:sparkles: Easy, Reusable Animation Utility library for Angular
Home Page: https://filipows.github.io/angular-animations
License: MIT License
:sparkles: Easy, Reusable Animation Utility library for Angular
Home Page: https://filipows.github.io/angular-animations
License: MIT License
Hi all,
I am starting using the library in my project.
Everythng is setup like described in the documentation (imports and dependencies), but when a try to use any of the animations, nothing happens, with no error in my console.
Can you please help me debugging the issue?
I noticed the attention seekers state change expression is bidirectional:
trigger((options && options.anchor) || 'pulseCustom', [
transition(
'0 <=> 1',
....
I was wondering if is it possible to parametrize this maybe with an enumerate like this:
interface IAttentionSeekerAnimationOptions {
direction: '=>' | '<=' | '<=>';
}
Then on the functions, say pulseAnimation for example
trigger((options && options.anchor) || 'pulseCustom', [
transition(
`0 ${options.direction || "<=>} 1`
....
In my case I wanted to trigger the animation only when state changes from false to true. I can submit a PR in a couple of days if you find this feasible.
Thanks
ERROR in node_modules/angular-animations/bouncint-exits/bounce-out-down.animation.d.ts(11,43): error TS1005: ',' expected.
Comment line 11 and run...
import { AnimationTriggerMetadata } from '@angular/animations';
import { IAnimationOptions } from '../common/interfaces';
export interface IBounceOutDownAnimationOptions extends IAnimationOptions {
/**
* Translate, possible units: px, %, em, rem, vw, vh
*
* Default: 2000px
*/
translate?: string;
}
export declare const bounceOutDown: import("@angular/animations/src/animation_metadata").AnimationReferenceMetadata;
export declare function bounceOutDownAnimation(options?: IBounceOutDownAnimationOptions): AnimationTriggerMetadata;
export declare function bounceOutDownOnLeaveAnimation(options?: IBounceOutDownAnimationOptions): AnimationTriggerMetadata;
Current implementation doesn't support animating leaving or entering children (with query(':leave')
).
It seems it's necessary to have this feature in order to animate route views.
Hi,
I really like this library. It allows us to focus on development and less on animations development. There is one thing I would like to have and this is an easing option that will allow the developers to decide the easing for the animations.
Thank you
Currently the zoom animation fades from 0 to 100% and scales from 0 to 100%. The scale from 0% creates a very mighty effect which I would like to settle down. I would like to define the start-scale for zoomIn and the final-scale for zoomOut to make the effect more gently. E.g. from 0.8% to 1%.
For comparison: Netflix zooms in the full page gently when starting a video. This is currently not possbile.
This is my code. I want Book Event text bounce again and again contentiously
animations:[
bounceOnEnterAnimation({anchor:'titlebounce'})
]
<h3 [@titlebounce] > Book Event </h3>
How to fix?
Maybe I am stupid but is it possible to use the animations with query? Specifically I wanted to create a stagger animation and use the limit:
Code:
animations: [
trigger('fadeIn', [
transition(':enter', [
query(':enter', [
style({opacity: 0}),
stagger('80ms', [
animate('500ms', style({opacity: 1})),
])
], {limit: 6})
])
])
]
Template:
<div class="items" @fadeIn>
<div class="item" *ngFor="let item of items"></div>
</div>
Is there someone who is willing to maintain this project on a more frequent basis? Angular 18 is out, I started using this on 13.
There are some breaking changes that should be refactored.
Hello, I cannot get the scale option to work with the bounce animation:
I tried it via:
bounceAnimation({scale: 0.5})
Fails with:
Argument of type '{ scale: number; }' is not assignable to parameter of type 'IAnimationOptions'. Object literal may only specify known properties, and 'scale' does not exist in type 'IAnimationOptions'. [2345]
as well as:
[@bounce]="{value: wrongInput, params:{scale: 0.5}}"
Then the animation plays but, scale has no effect
Am I doing smth wrong?
Hi,
Just as the title states, how can I get an animation to continually repeat? For example getting an image to use that attention seeker flash.
Thanks!
Hey Filipows, great library! I just started learning Angular and I'm using it to do some simple animations on a playground website I'm creating.
My issue is that I'm trying to make an shape rotate 360 degrees clockwise, delay 100ms, then repeat (infinitely). However, I'm having trouble because the Rotate animation preserves state, so when implementing it similarly to your simple loop animation, it causes the shape to rotate 360 degrees clockwise, but then it rotates 360 degrees back counterclockwise (due to going back to its initial state from its final state).
Do you have any ideas how would I achieve the desired effect with your library?
Thank you very much!
First great feature. Easy and fun to use :D
I have a problem when I try to build an app. I have this error:
ERROR in src/app/page-content/overview/overview.component.ts(16,5): Error during template compile of 'OverviewComponent'
Function calls are not supported in decorators but 'fadeInUpOnEnterAnimation' was called.
I'm using angular 8.2.0:
...
"@angular/forms": "^8.2.0",
"@angular/platform-browser": "^8.2.0",
"angular-animations": "^0.11.0",
...
In visual studio code, I have also error highlights. But when I again run: npm i angular-animations --save the error is gone. But when I change one parameter error is back again. Here are screenshots:
img1 - when I run the install
img2 - after I change one parameter
I saw in documentation that is working with AOT and JIT compilations.
Can you provide me suggestions to the problem?
Please update to last angular version to avoid old compilation es2015/esm2015
How to detect animation end event and enable another animation in sequence
Error: NG05105: Unexpected synthetic listener @horizontalStepTransition.done found. Please make sure that:
Either BrowserAnimationsModule
or NoopAnimationsModule
are imported in your application.
There is corresponding configuration for the animation named @horizontalStepTransition.done
defined in the animations
field of the @Component
decorator (see https://angular.io/api/core/Component#animations).
at checkNoSyntheticProp (platform-browser.mjs:760:11)
at NoneEncapsulationDomRenderer.listen (platform-browser.mjs:724:86)
at listenerInternal (core.mjs:25591:40)
at ɵɵlistener (core.mjs:25472:5)
at MatStepper_Case_1_For_6_Template (stepper.mjs:186:8)
at executeTemplate (core.mjs:11268:9)
at renderView (core.mjs:12470:13)
at createAndRenderEmbeddedLView (core.mjs:12540:9)
at LiveCollectionLContainerImpl.create (core.mjs:22877:31)
at createOrAttach (core.mjs:22630:40)
handleError @ core.mjs:6531
Show 1 more frame
Show less
core.mjs:29861 Angular is running in development mode.
core.mjs:6531 ERROR Error: NG05105: Unexpected synthetic listener @horizontalStepTransition.done found. Please make sure that:
Either BrowserAnimationsModule
or NoopAnimationsModule
are imported in your application.
There is corresponding configuration for the animation named @horizontalStepTransition.done
defined in the animations
field of the @Component
decorator (see https://angular.io/api/core/Component#animations).
at checkNoSyntheticProp (platform-browser.mjs:760:11)
at NoneEncapsulationDomRenderer.listen (platform-browser.mjs:724:86)
at listenerInternal (core.mjs:25591:40)
at ɵɵlistener (core.mjs:25472:5)
at MatStepper_Case_1_For_6_Template (stepper.mjs:186:8)
at executeTemplate (core.mjs:11268:9)
at renderView (core.mjs:12470:13)
at createAndRenderEmbeddedLView (core.mjs:12540:9)
at LiveCollectionLContainerImpl.create (core.mjs:22877:31)
at createOrAttach (core.mjs:22630:40)
handleError @ core.mjs:6531
Show 1 more frame
Show less
[NEW] Explain Console errors by using Copilot in Edge: click
to explain an error.
Learn more
Don't show again
Hello,
I am trying to get one of your animations to continually loop. I.e. I want this icon button to continually pulse. But I can't get it to work - it doesnt pulse at all. Any ideas?
import { pulseAnimation } from 'angular-animations';
@Component({
selector: 'app-credentials-dropdown',
templateUrl: './credentials-dropdown.component.html',
animations: [
pulseAnimation()
]
})
and
<button mat-icon-button [@pulse]="true">
<mat-icon>add</mat-icon>
</button>
First of all, thanks so much for creating this module! Saves a lot of time and energy on some very common animations. The issue I'm running into that I'm not finding very clear on the docs is I'm trying to have different enter/leave animations based on the direction the user is navigating on what is essentially a custom slider widget.
The following markup works great if I exclude the *ngIf, but as soon as the animation completes, all blocks are shown. If I include the *ngIf, no animation happens at all and the blocks are simply hot swapped.
Everything works as expected if I consistently have the same enter/leave animation every time regardless of direction. Thanks again and please let me know if this simply isn't possible or if I'm just missing some concept from the docs.
stepDirectionNext: boolean;
currentStep: number;
[@zoomInRight]="stepDirectionNext && currentStep===0"
[@zoomOutLeft]="stepDirectionNext && currentStep!==0"
[@zoomInLeft]="stepDirectionPrev && currentStep===0"
[@zoomOutRight]="stepDirectionPrev && currentStep!==0"
Like it is said, will you consider moving to Ivy?
Upgrading to iOS 15 causes this error and breaks my app. Works fine in iOS 14 and below.
Also seems to work ok in desktop safari for big Sur.
iOS 15 using an Ionic / Angular app.
⚡️ [error] - ERROR Error: Uncaught (in promise): Error: The animation trigger "flipOnEnter" has failed to build due to the following errors:
May be related to:
https://stackoverflow.com/questions/42744573/backface-visibility-not-working-in-safari
// html
<span [@fadeAnimTrigger]="wordIndex">{{words[wordIndex]}}</span>
// ts
animations: [
trigger('fadeAnimTrigger', [
transition(':decrement', [
style({ opacity: 0 }), animate('500ms', style({ opacity: 1 }))
]),
transition(':increment', [
style({ opacity: 0 }), animate('500ms', style({ opacity: 1 }))
]),
])
I'm trying to replace style({ opacity: 0 }), animate('500ms', style({ opacity: 1 }))
in the above code with your fadeIn
I am unsuccessfully trying to make the staggering animations work per the documentation.
attempt: https://angular-animations-lib-demo-pws6ji.stackblitz.io/test
if I use a simple array of values, i.e. *ngFor="let i of [1,2,3]"
then no problem, this works as expected.
If I use an array of objects, i.e. *ngFor="let i of my_array"
Where my array is
this.my_array = [ { foo: "value1", bar: "value", }, { foo: "value1", bar: "value", }, { foo: "value1", bar: "value", } ];
Then I get the error :
Failed to execute 'animate' on 'Element': 'NaNms' is not a valid value for easing
Is it possible to use these animations in group function ? Pardon the brevity of the question as I am quite new to angular animations
Thanks
Hello,
All animations in the page runs in the same time. how we can run animations on scrolling page.
Example : https://stackblitz.com/edit/angular-ivy-vxaiuz?file=src/app/app.component.ts
Is it possible to add global options like duration for all the animations? In the classic animate.css package it is possible by setting CSS variables (like --animate duration) in :root
Hi there, I have a looping animation on an icon.
<button *ngIf="showSave"><icon="star" [@bounce]="animState" (@bounce.done)="animDone()"><icon> Save</button>
There is an icon is inside of a button to draw attention. But I want to hide that button until some event completes.
When the event is complete, I want to show the save button ie *ngIf="showSave" however the icon does not animate.
If I take the <icon>
outside of the *ngIf, it works. How would one achieve this?
OnLeave animations are called when you switch tabs but OnEnter animations are not called back when you reenter the same tab.
This makes the elements go invisible for ever.
I manage to reproduce the bug via stackblitz.
Everything in the title, is this possible to use these animations for page transitions?
I tried it following the tutorial https://angular.io/guide/route-animations
It doesn't work
Hello,
I have just stumbled across your library and it looks amazing!
However I am using Angular 9 and am receiving an error in my code:
import { pulseAnimation } from 'angular-animations';
@Component({
selector: 'app-credentials-dropdown',
templateUrl: './credentials-dropdown.component.html',
animations: [
pulseAnimation()
]
The compile-time error is:
Error during template compile
could not resolve angular-animations relative to [object Object]
Any ideas? I am wondering if your library supports Angular 9.
Do note that if I stop "ng serve" and restart it, effectively recompiling the app, then this error goes away. However as soon as I then try to use an additional animation, the error comes back again, and I have to kill ng serve again.
So its not a showstopper - I am just worried that it might be a sign of something more sinister going on...
I don't quite like the animation of flip
and would like to have a simple card flip forward and backward.
I found flipInY
and flipOutY
does that but I'm not able to combine the two in nice seamless card flip.
I tried to use delay and chined but was not able to get a seamless result. I assume there is a way to do that?
Really love this package but I encountered a few limitations when using it. Providing more options to some animations would be amazing:
bounce
should have a direction property to control in which direction it bounces, usecase: an arrow could bounce to the right or left but bounce
can currently only bounce to the bottombounce
should have a distance property to control how much it bounces, usecase: something big will only bounce slightly with the current settingtada
should have a scale property to control how much it scales, usecase: the current default might be to slightly to pop out of the other content (in contrast heartbeat
has a scale property)I have two screens that i need to fade in and out one after the other but not both of them together. Is it possible to detect if the first fade out was completed to trigger the second fade in ?
I have three screens in total. First two are conditional, I want them to fade in and out one after the other (but not both at the same time). Is it possible ?
I apologize if i am not making any sense.
Hello i have a doubt, the standard animation pulse/rubber going left is normal?
this is my stackblit test, can you tell if I'm forgetting something?
https://stackblitz.com/edit/taiyou-test-angular-animations
thanks for the help
I have created an Ionic 5 Angular 10 project and I am importing some animations as I have done for previous projects.
However I am getting the error below. Any ideas what is causing this?
Similar code works fire with another Ionic 5 Angular 9 project I created.
Is this an Angular 10 issue or a typescript issue perhaps?
Error during template compile of 'AppComponent' Function calls are
not supported in decorators but 'slideInLeftOnEnterAnimation' was
called
If I remove the brackets I get the following error:
ERROR Error: Unable to resolve animation metadata node #undefined
at visitDslNode (browser.js:554)
at AnimationAstBuilderVisitor.build (browser.js:695)
at buildAnimationAst (browser.js:685)
at InjectableAnimationEngine.registerTrigger (browser.js:3856)
at registerTrigger (animations.js:166)
at Array.forEach ()
at AnimationRendererFactory.createRenderer (animations.js:170)
at createRootComponentView (core.js:18357)
at ComponentFactory$1.create (core.js:22157)
at ApplicationRef.bootstrap
import { slideInLeftOnEnterAnimation } from 'angular-animations';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
animations: [
slideInLeftOnEnterAnimation()
]
})
Ionic CLI : 6.11.11
Ionic Framework : @ionic/angular 5.3.5
@angular-devkit/build-angular : 0.1000.8
@angular-devkit/schematics : 10.0.8
@angular/cli : 10.0.8
@ionic/angular-toolkit : 2.3.3
angular-animations": "^0.11.0
Angular 8 was released on May 28th. Animations seem to be working fine on my side but I am getting an outdated dependency warning when installing via npm.
npm WARN [email protected] requires a peer of @angular/animations@^6.0.0 but none is installed. You must install peer dependencies yourself.
ETA on official Angular 8 support?
Is possible to set the "expand" and "collapse" animations in horizontal direction?
"bouncint" -> "bouncing"
https://github.com/filipows/angular-animations/tree/master/lib/bouncint-exits
by the way. Thank you for this utility lib.
also, how did you make your github profile image?
Hi there.
I am trying to replicate example of how animate until a variable is false and I only make it works with bounce animation. When I try with fadein or another is says: The provided animation trigger "enter" has not been registered!
My code:
component.html
<div [@fadeInOnEnter]="animState" (@fadeInOnEnter.done)="onAnimationEvent($event)" class="app-logo"></div>
component.ts
import { fadeInOnEnterAnimation} from 'angular-animations';
animations: [
fadeInOnEnterAnimation({ duration: 1000, delay: 2000 }),
]
I have an ngFor displaying the items in my array. How can display animations onEnter and onLeave every time an element is added or removed from my array?
<mat-card [@bounceInOnEnter] [@bounceOutOnLeave] *ngFor="let file of audioFiles">
My component that contains the items is setup like so:
@Component({ selector: 'app-main-form', templateUrl: './main-form.component.html', styleUrls: ['./main-form.component.scss'], animations:[ bounceInOnEnterAnimation, bounceOutOnLeaveAnimation ] })
Currently I get the error:
Error: Uncaught (in promise): Error: Unable to resolve animation metadata node #undefined
Hi,
is there a way that a component can be hidden before the delay ends. For example when using fadeIn with delay 3 sec?
I tried adding opacity: 0; animation-fill-mode: forwards;
css properties to the component where animation is attached. Didn't work though ...
Thanks
npm i @angular/[email protected] --force
npm WARN using --force Recommended protections disabled.
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @angular/[email protected].
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
When having a leave animation the start and end animation
Template:
<div *ngIf="isVisible" [@fadeOutOnLeave] (@fadeOutOnLeave.done)="animDone($event)"></div>
Component:
//...
isVisible = false;
ngOnInit() {
setTimeout(() => { this.isVisble = true; }, 5000);
setTimeout(() => { this.isVisble = false; }, 10000);
}
animDone(event: AnimationEvent) {
console.log('Animation Ended', event);
}
I would assume that animDone()
does only gets called after the div has been faded-out. Instead animDone
gets called on init already:
fromState: "void"
phaseName: "done"
toState: null
totalTime: 0
Collapse/Expand have performance issues on mobile devices. This is due to height recalculation on the DOM, there is a good article talking about this.
everytime i click a submit button it reloads the page.
The regular animation modules dont work with dom objects that are brought back in with ngif boolean changes
Can anyone send me in the right direction? first div-(slides out right)-> second div slides in left -(slides out right-> div one comes back. Thats what im trying to do and nothing is working ive tried.
Must say angular animations and styling is the biggest nightmare ever
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.