After setting up my first Angular project, I wanted to incorporate Angular Animations to bring life to my content as the user scrolls through the page. I aimed to not only have the content appear on scroll but also implement a staggering animation effect.
However, I encountered some difficulties along the way. With Angular 17 being relatively new and having undergone several changes, I struggled to find adequate resources or examples that could assist me in achieving the desired animation effects.
Here is a snippet of the Component HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
@defer (on viewport;){
<div class="grid grid-items" [@staggerAnimation]="projects.length">
@for (project of projects; track project.id;) {
<div class="container">
<h4>{{project.name}}</h4>
<p>
{{project.description}}
</p>
<a class="explore-btn" href="{{project.link}}" target="_blank">Explore</a>
</div>
}
</div>
} @placeholder {
<div>Loading Projects...</div>
}
</body>
</html>
This is how the Component TS File looked like:
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { provideAnimations } from '@angular/platform-browser/animations';
import {
trigger,
transition,
query,
stagger,
animate,
keyframes,
style,
} from '@angular/animations';
@Component({
selector: 'app-project-card',
standalone: true,
imports: [],
templateUrl: './project-card.component.html',
styleUrl: './project-card.component.css',
providers: [],
animations: [
trigger('staggerAnimation', [
transition('* => *', [
query(':enter', style({opacity: 0}), {optional: true}),
query(':enter', stagger('300ms', [
animate('1s ease-in', keyframes([
style({opacity: 0, transform: 'translateY(-75px)', offset: 0}),
style({opacity: 0.5, transform: 'translateY(35px)', offset: 0.3}),
style({opacity: 1, transform: 'translateY(0)', offset: 1}),
]))
]))
])
])
],
})
export class ProjectCardComponent {
projects = [ PROJECT OBJECTS HERE]
bootstrapApplication(ProjectCardComponent, {
providers: [provideAnimations()],
});
*Note: As this is a standalone project in angular 17, there is no need for NgModule file
I attempted placing the trigger at the div with "container" without success. Removing the @defer attribute also did not yield any results.
While unsure of its relevance, it's worth mentioning that this component serves as a child component within the project structure.