GSAP를 이용한 Animation 다루기

angular 에서 GSAP 사용하는 방법에 대해서는 아래 링크를 참조 바랍니다. GSAP를 이용한 Animation 다루기

여기서는 Three.js내에서 처리하는 부분만 말씀드리겠습니다.

import * as GSAP from 'gsap';
..........
GSAP.gsap.to(this.earL.rotation, { duration: totalSpeed, x: "+=.3", ease: GSAP.Back.easeOut });
GSAP.gsap.to(this.monster.head.rotation, {duration: 2, y: 0, x: -.3, ease: GSAP.Power4.easeInOut });
GSAP.gsap.killTweensOf(this.monster.pawFL.position);

특정 값만을 이용하고 싶을 경우 아래 처럼 처리하면 됩니다.

import { gsap, Power2 } from 'gsap';

// 0.1초 도안의  rotate 0에서 부터 1까지의 변경값을 delta(이전 로테이션값과 현재 로테이션값의 차)를 내어 특정한 내용을 프로그램하는 방식입니다.
..........
this.tween = {
  prerotate: 0,
  rotate: 0,
};

gsap.to(this.tween,  {
  ease: Power2.easeOut,
  duration: 0.1,
  rotate: 1,
  onUpdate: () => {
    const delta = this.tween.rotate - this.tween.prerotate;
    let deltaAngle = delta * rotation;
    this.layerGroup.rotateOnAxis( this.flipAxis, deltaAngle );
  },
  onComplete: () => {
  },
});