title: Animating SVG with Angular 4, transition and query
body: <p>I would like to animate an svg inside a component in Angular, but I am finding it difficult to specify steps in the animation.</p>
  
  <p>I want to animate the following steps:</p>
  
  <p>1) circle starts offscreen with opacity 0</p>
  
  <p>2) circle moves onto the screen from the top and gets more opaque as it goes, ending on opacity 1</p>
  
  <p>3) circle moves to the right, ending offscreen</p>
  
  <p>I can't even get it to start offscreen, but I also seem to have no control over when the animation triggers. I would like it to trigger 1s after the page loads.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;svg width="100" height="100"&gt;
    &lt;circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>TS:</p>
  
  <pre><code>import { Component, OnInit, HostBinding } from '@angular/core';
  import { style, animate, animation, animateChild, useAnimation, group, sequence, transition, state, trigger, query, stagger } from '@angular/animations';
  
  
  @Component({
    selector: 'app-svg-viewer',
    templateUrl: './svg-viewer.component.html',
    styleUrls: ['./svg-viewer.component.css'],
  
    animations: [
      trigger('myAwesomeAnimation', [
  
        transition(':enter', group([
  
          query('circle', stagger('0ms', [
            animate('200ms 250ms ease-in', style({ opacity: 0, transform: 'translateY(-400%)' }))
          ])),
        ])),
  
  
  
      ])
    ],
  
  })
  
  
  export class SvgViewerComponent implements OnInit {
  
    @HostBinding('@myAwesomeAnimation')
    public animateProfile = true;
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>My dev environment is a standard angular-cli build with the following additions to app.module.ts :</p>
  
  <pre><code>import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  </code></pre>
  
  <p>and within @NgModule in app.module.ts :</p>
  
  <pre><code>BrowserModule,
  BrowserAnimationsModule,
  </code></pre>