하수도키의 성장일기

개발일기/Vue.js

[Vue.js] Vue 애니메이션(Animate) #3 - GSAP 3

[Vue.js] Vue 애니메이션(Animate) #3 - GSAP 3 이번 포스팅은 Vue 애니메이션에 대해 알아보자. 애니메이션을 이용해 사용자 경험을 향상할 수 있다. 버튼 같은 곳에 마우스 호버 상태 일 때 클릭률을 높이거나 강조해야 되는 문구, 영역 등에 애니메이션을 적용해 집중력을 높일 수 있다. 목차 Transition Page Transition Transition Group Javascript Hooks + Velocity GSAP(이번 포스팅) 개요 이전 포스팅에서는 Velocity.js 라이브러리를 사용했다. 이번 포스팅에선 GSAP(Green Sock Animation Platform) 강력하고 인기 있는 애니메이션 라이브러리를 Vue 에 적용하고 사용하는 법을 알아보자. GSAP이..

개발일기/Vue.js

[Vue.js] Vue 애니메이션(Animate) #2 - Javascript Hooks, Velocity

이번 포스팅은 Vue 애니메이션에 대해 알아보자. 애니메이션을 이용해 사용자 경험을 향상할 수 있다. 버튼 같은 곳에 마우스 호버 상태 일 때 클릭률을 높이거나 강조해야 되는 문구, 영역 등에 애니메이션을 적용해 집중력을 높일 수 있다. 목차 Transition Page Transition Transition Group Javascript Hooks + Velocity(이번 포스팅) GSAP 2021.04.11 - [개발일기/Vue.js] - [Vue.js] Vue 애니메이션(Animate) #1 - Transition [Vue.js] Vue 애니메이션(Animate) #1 - Transition 이번 포스팅은 Vue 애니메이션에 대해 알아보자. 애니메이션을 이용해 사용자 경험을 향상할 수 있다. 버튼 ..

개발일기/Vue.js

[Vue.js] Vue 애니메이션(Animate) #1 - Transition

이번 포스팅은 Vue 애니메이션에 대해 알아보자. 애니메이션을 이용해 사용자 경험을 향상할 수 있다. 버튼 같은 곳에 마우스 호버상태 일 때 클릭률을 높이거나 강조해야 되는 문구, 영역 등에 애니메이션을 적용해 집중력을 높일 수 있다. 목차 Transition(이번 포스팅) Page Transition Transition Group Javascript Hooks + Velocity GSAP Transition(트랜지션) Vue에서 Transition 래퍼(Wrapper) 컴포넌트를 기본으로 제공하고 있다. 이 Transition 컴포넌트를 이용해 다양한 애니메이션 효과를 낼 수 있다. Transition은 번역하자면 전환이다. 말 그대로 from → to로 되는 것이 전환이다. 전활 될 때 애니메이션을 ..