TimelineMax .play() method not launching animation

[Filip Winiarski 15 Likes (Newbie)]

Hi, I am trying to launch my timeline without any success. Tweens are being added correctly to the timeline, however .play() does nothing - no errors neither. If I use TweeMax straight away in openContact() animation will occur.

I am using Angular CLI 5.2.9 and gsap 1.20.4, here is the code:
 

import { TweenMax, TimelineMax, Power2 } from 'gsap';

...

tween_home = TweenMax.to('#home', this.animation_time, {
   ease: this.ease,
   display: 'none',
   opacity: 0,
   scale: 0.7
});

openContact(): void {
   const tl = new TimelineMax();
   tl.add(this.tween_home);
   console.log(tl);
   tl.play();
}

Any ideas what am I doing wrong, how to launch it?

UPDATE: This works:
 

openContact(): void {
   const tl = new TimelineMax();
   tl.add(TweenMax.to('#home', this.animation_time, {
    ease: this.ease,
    display: 'none',
    opacity: 0,
    scale: 0.7
   }));
   tl.play();
}

 

[OSUblake 9,990 Likes (Superhero)]

It's hard to tell what's going on from a snippet. Can you make a simple demo on stackblitz?

https://stackblitz.com/

 

[Filip Winiarski 15 Likes (Newbie)]

5 minutes ago, OSUblake said:

It's hard to tell what's going on from a snippet. Can you make a simple demo on stackblitz?

https://stackblitz.com/

 

Sorry, here it is: https://stackblitz.com/edit/angular-yhjnhz

I want span to animate on click, however nothing happens. What am I doing wrong?

[OSUblake 9,990 Likes (Superhero)]

The animation will play right away the way you set it up, and the element might not be ready.

 

import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';
import { TweenMax, TimelineMax, Power2 } from 'gsap';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  
  @ViewChild('test') testRef: ElementRef;

  tween_test;

  ngOnInit() {
    this.tween_test = TweenMax.to(this.testRef.nativeElement, 0.3, {
      opacity: 0,
      paused: true 
    });
  }

  openContact() {
    const tl = new TimelineMax();
    tl.add(this.tween_test.play());
  }
}

 

https://stackblitz.com/edit/angular-tkmxb4

 

[Filip Winiarski 15 Likes (Newbie)]

@OSUblake Thank you, it works perfectly!

One little detail to close the topic:
 

const tl = new TimelineMax({paused: true});
tl.add(this.tween_test);
tl.play(); // launches perfectly