williamjuan027/angular-animations-explorer

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

Angular Animations Explorer

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

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.

• 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/content-components.

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.

angular-animations-explorer's Issues

Add section on Ionic integration

ngIf and nfFor loop in gsap

How to make animations work with NgIf and NgFor angular + gsap

Add section on Nativescript integration

Angular code snippets have syntax error

Angular animation code snippets are wrong:

• Missing closing brackets
• Wrong quotation marks

Example:

animations: [
  trigger(‘fadeInGrow, [
    transition(‘:enter’, [
      query(‘:enter’, [
        style({ opacity: 0, transform: ‘scale(0.8)’  }),
        group([
          animate(‘500ms’, style({ opacity: 1 }),
          animate(‘200ms ease-in’, style({ transform: ‘scale(1)’ })
        ])
      ])
    ])
  ])
]