Angular Animations Explorer

141

31

William Juan

Added on December 21, 2024

Live site: https://williamjuan027.github.io/angular-animations-explorer A reference with a live demo for various animation techniques you can use in Angular and Angular related technologies such as Ionic and Nativescript. Contains sections ranging from Angular Animations (basic to advanced use cases), CSS Animations, Web Animation APIs to third party integrations such as popmotion and tips on performance and reusability.

Angular Animations Explorer

Live site: https://williamjuan027.github.io/angular-animations-explorer A reference with a live demo for various animation techniques you can use in Angular and Angular related technologies such as Ionic and Nativescript. Contains sections ranging from Angular Animations (basic to advanced use cases), CSS Animations, Web Animation APIs to third party integrations such as popmotion and tips on performance and reusability.

William Juan

README.md

🚀 A resource showcasing the different animations techniques you can use in an Angular application.

Hero image

This project started as a demo for In-Depth guide into Animations in Angular blogpost on indepth.dev, with the goal of providing a live version of all the techniques covered in the article that you could explore and play around with.

Over time, the project grew beyond the article, showcasing even more animation techniques you can use in your Angular applications - including new features of Angular's animations module and other animation libraries.

It is broken down into different sections, each section covering a set of related techniques (i.e. Angular Animations, third-party library animations) along with a live demo that you can play with. Some of the demos have the same animation written in different ways. This is done intentionally to showcase how the different ways are reflected both visually on the UI and how the browser interprets the code.

This is not meant to be as comprehensive or a replacement for Angular's official documentation, but rather a quick way to showcase the different animation methods that are available, look at their behavior, some use cases, and the code behind the implementation.

If you find this helpful, bookmark it, star it on Github, or share it on Twitter 😀

Have any questions or want to see a different kind of animation, let me know - open an issue on the repo or tweet me at @williamjuan27

Enjoy :)

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:4200
npm run start

# build for production
npm run build

Folder Structure

There are 2 main folders that contains the bulk of the content in the application.

Have any questions or want to see an animation in Angular not included here?

Tweet me at @williamjuan27 or open an issue in this repo.

Related Content

ng-mocks

An Angular testing library for creating mock services, components, directives, pipes and modules in unit tests. It provides shallow rendering, precise stubs to fake child dependencies. ng-mocks works with Angular 5 6 7 8 9 10 11 12 13 14 15 16, jasmine and jest.
GitHub•Updated today

Angular Authentication

An Angular application that demonstrates best practices for user authentication.
GitHub•Updated 5 days ago

Angular Scrollbar

Custom overlay-scrollbars with native scrolling mechanism, it also provides a cross-browser smooth scroll directives.
GitHub•Updated 27 days ago

generator-ngx-rocket

ngx-rocket
Extensible Angular 12+ enterprise-grade project generator based on angular-cli with best practices from the community. Includes PWA, Cordova & Electron support, coding guides and more!
GitHub•Updated 18 months ago

Angular, NgRx & Angular Material Starter

Angular, NgRx and Angular Components (previously known as Material) Starter projects which shows you how to implement application with routing, custom themes, translations, state management and more
GitHub•Updated 27 months ago

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.