GSAP

npm i gsap

import * as GSAP from 'gsap';

참조 : https://greensock.com/cheatsheet/ defulat setting

간단 사용법

html의 class 나 id를 바로 불러와서 사용가능하다.

html

<div class="box1"></div>

ts

import * as GSAP from 'gsap';

export class AppComponent implements AfterViewInit {
..........
  ngAfterViewInit() {
    const box1 = document.getElementsByClassName('box1');
    GSAP.gsap.set(box1, { width: 'calc(25% - 10px)' });
  }
}

ElementRef 룰 이용하여 처리하기

html

<div #myElement style="opacity: 0;"></div>
<div #myElement2></div>
<canvas #myCanvas></canvas>

ts

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import * as GSAP from 'gsap';

export class GsapComponent implements AfterViewInit{
  @ViewChild('myElement', {static: true}) divRef: ElementRef<HTMLDivElement> = {} as ElementRef;
  @ViewChild('myElement2', {static: true}) divRef: ElementRef2<HTMLDivElement> = {} as ElementRef;
  @ViewChild('myCanvas', {static: true}) canvasRef: CanvasRef<HTMLCanvasElement> = {} as ElementRef;
  ngAfterViewInit(){
    GSAP.gsap.to(this.divRef.nativeElement, {
      opacity: 1
    });
    
    GSAP.gsap.to(this.ElementRef2.nativeElement, {
      transformOrigin: 'center bottom',
      scaleY: -1,
      opacity: 1
    });

    // 바로 사용해도되고 아래와 같이 처리해도 되고...
    this.canvas = this.CanvasRef.nativeElement;
    GSAP.gsap.to(this.canvas, {
      filter: 'blur(10px)'
    });
  }
..........
}

GSAP.gsap.to(document.getElementsByClassName('message'), { // className을 이용해서 가져올 수 도 있다.
  opacity: 0,
  display: 'none',
});

GSAP.gsap.to(document.getElementById('map'), { // ID를 이용해서도 가져올 수 있다.
  opacity: 0,
  display: 'block',
});
GSAP.gsap.to(document.getElementById('map'), { // transition time
  duration: 1 // 초 단위로 설정
});

GSAP.gsap.to(document.getElementById('map'), {
  delay: 1 // 초 단위로 설정
});

순차적 진행및 call back

const tl = GSAP.gsap.timeline();
tl.to(el, {
  top:  `calc(${this.tubePosition[this.currentLevel][to][1]}px - 90px)`,
  left: `calc(50vw + ${this.tubePosition[this.currentLevel][to][0]}px - 70px)`,
  rotate: 75,
  zIndex: 100
}).to(el, {
    rotate: 90
}).to(el, {
  top: `calc(${this.tubePosition[this.currentLevel][from][1]}px)`,
  left: `calc(50vw + ${this.tubePosition[this.currentLevel][from][0]}px)`,
  rotate: 0
}).to(el, {
  zIndex: 0
});

tl.eventCallback("onComplete", () => {this.transferring = false});

element 정보 가져오기

GSAP.gsap.getProperty([Element], 'left');
const width = GSAP.gsap.getProperty('body', 'width');

만약 element 를 className으로 가져올경우 반드시 몇번째 인지 인식 시켜야 한다.

const el = document.getElementsByClassName('hint-div');
const display = GSAP.gsap.getProperty(el[0], 'display');

select

// Angular
@Component({ ... })
class MyComponent implements OnInit {

  constructor(private el: ElementRef) {
    this.q = GSAP.gsap.utils.selector(el);
  }

  ngOnInit() {    
    // uses this.el.nativeElement.querySelectorAll() internally
    GSAP.gsap.to(this.q(".box"), { x: 100 });
  }
}

easy

참조 : https://greensock.com/docs/v3/Eases

gsap.to(graph, { duration: 2.5, ease: "expo.out", y: -500 });

event Callback

참조 : https://greensock.com/docs/v3/GSAP/Tween/eventCallback()

"onComplete", "onUpdate", "onStart" or "onRepeat"

gsap.to(obj, {duration: 1, x: 100, onComplete: myFunction, onCompleteParams: ["param1","param2"]});
myAnimation.eventCallback("onComplete", myFunction, ["param1","param2"]);

myAnimation.eventCallback("onUpdate", null);

myAnimation.eventCallback("onComplete", completeHandler)
  .eventCallback("onUpdate", updateHandler, ["param1"]).play(1);

값만 변화시키기

private position = {
  x: 0,
  y: 0,
  rotate: 0,
};

GSAP.gsap.to(this.position, {
  duration: 2,
  ease: "bounce.out",
  x: 400, 
  y: 400, 
  rotate: 3,
  onUpdate: () => {
    // 2초동안(duration) bounce.out 으로 position의 각 값들이 변화된느 것을 확인 할 수 있습니다.
    console.log(this.position)

  },
  onComplete: () => {
    
  }
});