Angular 11 + GSAP: Invalid property; Missing Plugin?

[chrisjavieroliveros]

Hello! I just started learning GSAP today and I'm trying to use this with Angular 11. A while back (Angular 7?) it was very easy to import and use GSAP with Angular. Now it doesn't seem so. (I most probably just missed something.)

What's wrong with my code?

import { Component, ViewChild } from '@angular/core';
import { gsap } from 'gsap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor() {}

  @ViewChild('box') box?: any;

  ngAfterViewInit() {
    gsap.to(this.box, { x: 100 });
  }
}

It's returning this error:

 

 

Thanks! I'm looking forward to be very active in this community!

 

 

[ZachSaucier]

Hey chrisjavieroliveros and welcome to the GreenSock forums.

 

That warning usually means that the target that you're animating isn't a DOM element and doesn't have an x property. Most likely this.box is some state object and not the DOM element itself. I've never used Angular 11, but based on this article, it looks like you should use this.box.nativeElement instead:

gsap.to(this.box.nativeElement, { x: 100 });

 

[chrisjavieroliveros]

1 hour ago, ZachSaucier said:

Hey chrisjavieroliveros and welcome to the GreenSock forums.

 

That warning usually means that the target that you're animating isn't a DOM element and doesn't have an x property. Most likely this.box is some state object and not the DOM element itself. I've never used Angular 11, but based on this article, it looks like you should use this.box.nativeElement instead:

gsap.to(this.box.nativeElement, { x: 100 });

 

Ah! I remember now! Thank you Zach!