CODEWITHSUNDEEP
angularsvgangular-animations
Davtho1983
Davtho1983

Reputation: 3954

Animating SVG with Angular 4, transition and query

I would like to animate an svg inside a component in Angular, but I am finding it difficult to specify steps in the animation.

I want to animate the following steps:

1) circle starts offscreen with opacity 0

2) circle moves onto the screen from the top and gets more opaque as it goes, ending on opacity 1

3) circle moves to the right, ending offscreen

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.

HTML:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

TS:

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() {
  }

}

My dev environment is a standard angular-cli build with the following additions to app.module.ts :

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

and within @NgModule in app.module.ts :

BrowserModule,
BrowserAnimationsModule,

Upvotes: 2

Views: 9012

Answers (1)

bjrhodes
bjrhodes

Reputation: 34

The plunker you linked to, the other animation rules are blocking. Looks like you stripped some markup(?) and so it's trying to run non-optional animations that fail. Deleted those and then added this:

    query('circle', style({transform: 'translateX(-200%)'})),
    query('circle', group([
       animate('300ms cubic-bezier(0.68, 0, 0.68, 0.19)', style({ transform: 'translateX(0)' }))  
    ])),

Which got the circle moving in from the side. Never done angular4 animations though so this is probably not optimal!

Plunker: https://plnkr.co/edit/pdFK4CQ4AJyBhyP7IoGq?p=preview

EDIT!

Managed to put that 1 sec delay on using keyframes:

animations: [
  trigger('profileAnimation', [
    transition(':enter', group([
      query('circle', style({transform: 'translateX(-200%)'})),
      query('circle', group([
       animate('2000ms ease-in', keyframes([
          style({ transform: 'translateX(-200%)', offset:  0.5 }),
          style({ transform: 'translateX(0)', offset:  0.75 }),
          style({ transform: 'translateX(0)', offset:  0.95 }),
          style({ transform: 'translateX(50%)', offset:  0.98 }),
          style({ transform: 'translateX(0)', offset:  1 }),
        ]))  
      ])),
    ]))
  ])
],

I also added in some cheeky extras at the end to demo a bit how they work. Handy. This runs a two second animation, which involves doing nothing for 1 sec, then rolling in for 1/2 sec, then nothing, then a silly boop.

https://plnkr.co/edit/gspBK24mI1oWYmDX6t5E?p=preview

Upvotes: 1

Related Questions