Questions tagged animation

Explore the latest questions and answers asked by our top developers.

How to modify CSS variable in an angular animation state

I’m creating a "draggable" component which can be moved on the page and plays an animation when destroyed. I am curently setting the style.transform attribute of the component host to translate3d to change its position on the document: @Component({ selector: ‘app-window’, templateUrl: ‘./window.component.html’, styleUrls: [‘./window.component.scss’], animations: [ trigger(‘WindowAnimation’, [ state(‘void’, style({ opacity: ‘0’, transform: ‘scale(0)’, […]

By Sadiinso
Published
Categorized as angular, animation, css Tagged , ,

Angular: ChangeDetection Interferes with HostBinding

I’m trying to implement an Animate On Scroll library/helper based on this idea Wizdm Genesys I have a service that emits an IntersectionInfo (IsIntersecting, Direction, IsEntering, etc. ) object when an element intersects with the viewport. I subscribe to it and if the element is entering the viewport, I trigger the enter animation. It works […]

how to initialize a svg animation in angular at the moment is displayed on the screen?

I have animations in svg that i need initialize after display in the viewport, if i use de svg in javascript vanilla this work properly, but if i use angular the animation start in the moment of loading de page and not in the moment of showing in the screen. I solved it by creating […]

By Fernando Arbelo
Published
Categorized as angular, animation, svg Tagged , ,

Execute animation when the element enters the viewable area in angular11

I want to trigger an animation when the window scrolls and the element enters the visible area, instead of using click events or buttons to trigger click me , stackblitz address The animation is triggered when the current page loads, how can I make the card to trigger the animation when scrolling to the visible […]

By yedajiang44
Published
Categorized as angular, animation Tagged ,

angular animation stagger with random delay

I am trying to display multiple divs inside an *ngFor loop using a stagger blink animation. To achieve a kind of glitching effect, i’d want the stagger animation delay between each loop to be a random number between 0.5s to 1s trigger(‘stagger’, [ transition(‘* => *’, [ query(‘:enter’, [ style({ opacity: 0 }), stagger((Math.random() * […]

By Kais Ezzine
Published
Categorized as angular, animation, typescript Tagged , ,

Is a version incompatibility preventing my Angular CLI animations from working?

I have a project to do. The Angular project was already set up when I started working. However, the animations do not seem to work properly. When I put a mat input placeholder, the placeholder doesn’t disappear when I start writing in it. When I put a mat-select, the select doesn’t drop down. There’s my […]

By Alpha93
Published
Categorized as angular, animation, css, html, typescript Tagged , , , ,

Angular Text Rotator

I want to implement simple text rotator which will rotate each 3 seconds some texts. The change will be animated. I have found jquery plugin which perfectly solves my problem: https://github.com/peachananr/simple-text-rotator But I have read that it’s not a good practice to use jquery plugins in Angular Applications. Hence I want to implement text rotator […]

Bad angular animation state after list sort

<ul> <li *ngFor="let user of users; trackBy: identify; index as i" [@anim]="user.id" (@anim.done)="test($event)"> {{user.name}} (@{{user.id}}) </li> </ul> constructor() { this.change1(); } change1(): void { this.users = [user1, user2, user3, user4, user5]; } change2(): void { this.users = [user2, user1, user3, user4, user5]; } identify(index: number, item: User) { return item.id; } const user1 = { […]

Animate angular list

<ul> <li *ngFor="let user of users; trackBy: identify; index as i" [@anim]="user.id" (@anim.done)="test($event)"> {{user.name}} (@{{user.id}}) </li> </ul> constructor() { this.change1(); } change1(): void { this.users = [user1, user2, user3, user4, user5]; } change2(): void { this.users = [user2, user1, user3, user4, user5]; } identify(index: number, item: User) { return item.id; } const user1 = { […]

Angular: Disable animation on page load

Angular 11. I have a list of inputs (wrapped by a div, each.) with the ability to add an input using reactive forms, so whenever the user clicks a button to add an input, I push a control to the inputs array. The behavior I want is that whenever the user dynamically adds an input, […]

By Yoni Segev
Published
Categorized as angular, animation Tagged ,
1 2 3 4 5 10

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq