Angular Animations Explorer

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

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

It is broken down into different sections the same way the article is, so you should expect every section in the article that has an example also has the live version on the demo application. Some of the demo might 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.

Check out the site here: http://williamjuan027.github.io/angular-animations-explorer/

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

If you like my work, feel free to tweet about it or star this repository.

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.

• Content: All the content you see on the application are written in markdown located in src/assets/post-content/ in their respective folders.
• Demo: For posts that contains a demo component, these components are located in src/app/content/ as separate modules in their respective folders.

Attributions

Special thanks to the following projects:

• Illustrations from undraw.co
• Layouts using Flex Layout
• Basic components from Angular Material
• Markdown parser from ngx-markdown