How to use GSDevTools in an Angular component

[Masha555]

Hello, please provide an example or a small explanation of how to use GSDevTools in an Angular component .

 

I don't know how to add GSDevTools to a demo project, but I tried to create a minimal component to make it easier for you to help me advise you on how to properly use GSDevTools.create() in an Angular component.

[GreenSock]

Hi @Masha555. Thanks for being a Club GreenSock member! 💚

 

GSAP is completely framework-agnostic. It doesn't care if you're using React, Angular, Vue, vanilla JS or whatever. It's pure JavaScript. It really shouldn't matter much which framework you're using. 

 

I'm completely unfamiliar with Angular, but I know plenty of people use it with GSAP. If you're stuck, please just post a minimal demo (like a stackblitz or CodeSandbox) that illustrates the problem and we'd be happy to take a peek. And obviously if anyone else here in these forums is willing to post a demo showing GSDevTools in Angular, that'd be great. 

[Masha555]

On 8/5/2023 at 12:56 AM, GreenSock said:

Hi @Masha555. Thanks for being a Club GreenSock member! 💚

 

GSAP is completely framework-agnostic. It doesn't care if you're using React, Angular, Vue, vanilla JS or whatever. It's pure JavaScript. It really shouldn't matter much which framework you're using. 

 

I'm completely unfamiliar with Angular, but I know plenty of people use it with GSAP. If you're stuck, please just post a minimal demo (like a stackblitz or CodeSandbox) that illustrates the problem and we'd be happy to take a peek. And obviously if anyone else here in these forums is willing to post a demo showing GSDevTools in Angular, that'd be great. 

   Hello! I added a small demo component.   Demo

[Rodrigo]

Hi,

 

You're not importing the GSAP DevTools constructor, you're not registering it and is better to instantiate it after creating your animations:

import gsap from 'gsap-trial';
import GSDevTools from 'gsap-trial/GSDevTools';

gsap.registerPlugin(GSDevTools);

export class App implements AfterViewInit {
  @ViewChild('link', { static: true }) linkEl:
    | ElementRef<HTMLElement>
    | undefined;

  constructor() {}
  ngAfterViewInit(): void {
    this.animation();
    // Instantiate GSAP DevTools
    GSDevTools.create();
  }

  name = 'Angular';

  public animation() {
    const tl = gsap.timeline();

    if (this.linkEl) {
      gsap.set(this.linkEl.nativeElement, { textDecoration: 'none' });
      tl.to(this.linkEl.nativeElement, {
        transformOrigin: '50% 50%',
        background: 'crimson',
        duration: 3,
        color: 'white',
        padding: '10px',
        ease: 'expo.out',
        borderRadius: 20,
      });
    }
  }
}

Hopefully this helps.

Happy Tweening!

[Masha555]

14 hours ago, Rodrigo said:

Hi,

 

You're not importing the GSAP DevTools constructor, you're not registering it and is better to instantiate it after creating your animations:

import gsap from 'gsap-trial';
import GSDevTools from 'gsap-trial/GSDevTools';

gsap.registerPlugin(GSDevTools);

export class App implements AfterViewInit {
  @ViewChild('link', { static: true }) linkEl:
    | ElementRef<HTMLElement>
    | undefined;

  constructor() {}
  ngAfterViewInit(): void {
    this.animation();
    // Instantiate GSAP DevTools
    GSDevTools.create();
  }

  name = 'Angular';

  public animation() {
    const tl = gsap.timeline();

    if (this.linkEl) {
      gsap.set(this.linkEl.nativeElement, { textDecoration: 'none' });
      tl.to(this.linkEl.nativeElement, {
        transformOrigin: '50% 50%',
        background: 'crimson',
        duration: 3,
        color: 'white',
        padding: '10px',
        ease: 'expo.out',
        borderRadius: 20,
      });
    }
  }
}

Hopefully this helps.

Happy Tweening!

Thank you very much. Now I know how to use it!