Jump to content
Search Community

TimelineMax .play() method not launching animation

Filip Winiarski test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

 

Link to comment
Share on other sites

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

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...