Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/williamjuan027/angular-animations-explorer

🧸 A resource to showcase the different animations that you could do with Angular
https://github.com/williamjuan027/angular-animations-explorer

angular animation

Last synced: 8 days ago
JSON representation

🧸 A resource to showcase the different animations that you could do with Angular

Awesome Lists containing this project

README 

        
# Angular Animations Explorer



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



[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=for-the-badge)]()

[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge)]()

[![Angular](https://img.shields.io/badge/Angular-15-DE0031.svg?style=for-the-badge)](https://github.com/angular/angular)

[![social](https://img.shields.io/twitter/follow/williamjuan27?color=%23249FEC&label=follow%20me&logo=twitter&style=for-the-badge)](https://twitter.com/williamjuan27)



![Hero image](src/assets/images/github-hero.png)



This project started as a demo for [In-Depth guide into Animations in Angular](https://indepth.dev/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](https://angular.io/guide/animations), 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](https://github.com/williamjuan027/angular-animations-explorer), or share it on [Twitter](https://twitter.com/intent/tweet?text=Explore%20the%20different%20ways%20to%20animate%20your%20Angular%20Apps%20by%20%40williamjuan27%20%23angular%20%23javascript%20%23webdev%0Ahttps%3A%2F%2Fwilliamjuan027.github.io%2Fangular-animations-explorer) 😀



Have any questions or want to see a different kind of animation, let me know - open an [issue on the repo](https://github.com/williamjuan027/angular-animations-explorer/issues) or tweet me at [@williamjuan27](https://twitter.com/Williamjuan27)



**Enjoy :)**



## Build Setup



```bash

# 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.



- **Content**: All the content you see on the application are written in markdown located in [`src/assets/post-content/`](src/assets/post-content) in their respective folders.

- **Demo**: For posts that contains a demo component, these components are located in [`src/app/content/content-components`](src/app/content/content-components/).



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



Tweet me at [@williamjuan27](https://twitter.com/Williamjuan27) or open an issue in this repo.