DEV Community

Tu Bui
Tu Bui

Posted on • Edited on

GSAP TWEEN

//Declare Timeline

private timeLineMove: gsap.core.Timeline;
Enter fullscreen mode Exit fullscreen mode

//CreateTimeline

private tweenScaleThenTrasparent(): void { this.timeLine = gsap.timeline({ paused: true }); timeLine.fromTo(this.node,{scaleX: 1},{ scaleX: 1.1, duration: 0.2 }, "scaleUp"); timeLine.fromTo(this.node,{scaleX: 1.1},{ scaleX: 1, duration: 0.2 }, "scaleDown"); timeLine.fromTo(this.node,{opacity: 255},{ opacity: 0, duration: 0.2 ease: Back.easeOut }, "transparent"); } //Using this.timeline.restart(); //MUST protected onDestroy(): void { if (this.timeLineMoveUp) { this.timeLineMoveUp.kill(); } }
Enter fullscreen mode Exit fullscreen mode

Notice:
_Create Timeline moving to X = 100;
_First time moving from 0=>100
_When use timeLineMove.restart(); if current x = -500 => Tween still move from 0->100

Top comments (0)