[GSAP] Tween과 to(), from(), fromTo()

 

GSAP은 Tween 및 Timelines를 만들고 이를 제어하는 다양한 메서드와 속성을 가진 객체(object)입니다.

그렇다면 Tween과 Timelines는 무엇인가?!

오늘은 먼저 Tween에 대해서 알아보겠습니다!!

 

💫 Tween

Tween은 애니메이션의 속성을 정의하고, 그 속성대로 애니메이션이 작동하게 하는 것을 말합니다.

target, duration 등 작성된 속성을 토대로 Tween이 작동하면서 해당 시점의 속성 값이 무엇이어야 하는지를

파악하여 이에 따라 적용합니다. (영문을 해석하다 보니... 매끄럽게 이해하시기 어렵다면... 죄송합니다...허허)

 

Tween을 생성하기 위한 기본 메소드는 .to(), .from(), .fromTo()가 있습니다.3가지의 메소드는 Tween 인스턴스를 반환합니다.

 

또한 3가지의 메소드 모두   gsap.to("타겟", {속성: 속성값, ....})  문법을 사용하고 있습니다.

아래 이미지로 간단히 이해하시면 될거 같습니다!!

gsap.to()

gsap.to()는 간단한 애니메이션을 주기에 유용하며, 대상과 속성을 작성해주면 됩니다.

속성은 애니메이션이 끝나는 지점을 작성합니다.

gsap.to('.target',{x:200,y:300})

 

gsap.from() 과 gsap.fromTo()

gsap.to()를 이해하셨다면, from()과 fromTo()는 바로 이해가실겁니다.

 

gsap.from()은 애니메이션이 시작하는 지점을 작성하여, 지정한 값에서 원래 값으로 애니메이션 됩니다.

gsap.from('.target',{x:200,y:300})

 

gsap.fromTo()는 애니메이션이 시작하는 지점과 끝나는 지점을 함께 작성하여,

지정한 값에서 지정한 값까지 애니메이션 됩니다.

gsap.fromTo('.target',{x:100,y:100},{x:300,y:300})

3가지 메서드의 예시입니다.

See the Pen GSAP Basic Tween by GreenSock (@GreenSock) on CodePen.

 

 

속성에는 CSS의 transform(x, y, rotate, scale), opacity 등을 적용할 수 있습니다. 

심지어!! width, height, backgroundColor, color, padding, vh, vw 모두 적용할 수 있습니다.

다만, CSS의 transform, opacity가 아닌 값을 변경하면 브라우저가 페이지 레이아웃을 다시 렌더링하기 때문에

브라우저의 성능을 위해 최대한 사용을 지양하는 것을 권장한다고 합니다.

 

이렇게 Tween 그리고 Tween을 생성하는 메소드 3가지를 정리해보았습니다.
글 읽어 주셔서 감사합니다.
부족한 부분이 있다면 댓글로 알려주시면 감사히 배우겠습니다:)