[Web] gsap 라이브러리를 통한 애니메이션 효과

yenaryu·2022년 8월 9일

GSAP JavaScript

Web

목록 보기

17/24

javascript gsap 라이브러리를 통한 애니메이션 효과 부여하기
GSAP GreenSock ScrollTrigger

◻️ gsap.to

원래 상태에서 속성을 부여하여 변하는 상태로 되는 것
시작->끝점까지 애니메이션 속성을 부여한다

box를 x축으로 100만큼 이동
gsap.to('.box',{
	x:100
})

이동 시간 부여
gsap.to('.box',2,{
	x:100
})
gsap.to('.box',{
	duration:2,
	x:100
})
2초의 시간 부여
둘 다 동일하게 사용할 수 있다
duration은 지속 시간을 의미

시간차 부여
gsap.to('.box',{
	x:100,
	stagger:0.1
})
gsap.to('.box',{
	y:100,
	stagger:0.1
})
x축 100, y축 100으로 이동
stagger은 시차 간격 띄우기를 의미한다.
각각 애니메이션 시작 시간 사이 0.1초를 추가

◻️ gsap.from

변한 상태에서 속성을 부여해 다시 원래 상태로 돌아오는 것(태초의 상태)
끝->시작점까지 애니메이션 속성을 부여한다

2초의 시간동안 원래 상태로 돌아옴
/* gsap.from('.box',2
,{x:100}) */
gsap.from('.box',{
	duration:2,
	x:100
})

◻️ gsap.fromTo

시작값(from)에서 종료값(to)로로 변화
애니메이션의 시작 점과 끝 점까지의 모든 속성을 설정해준다

gsap.fromTo('.box',{
	y:100 //전을 셋팅한다 (이전의 값을 제시)
},{
	duration:3,
	y:0,
	x:100 //후값을 셋팅한다 (변하는 값 제시)
})
처음 상태는 y100(세로 하단) -> y를 0으로 위로 올라오고 + x축 100만큼 가로로 이동
💡x:50은 50px을 의미한다. %을 사용하고 싶다면 xPercent:50으로 해줘야 한다.

<style>
    .box{width: 100px; height: 100px; background: #f00; margin: 10px;}
</style>
gsap.to('.box',{
	width:200,
	hight:300,
	background:'#00f' /
})
css에 설정된 기본 값인 w100,h100,빨간색에서 -> w200,h300,파란색으로 변경

◻️ gsap.timeline

gsap.timeline({}) : timeline코드순서대로 실행된다 (시간차 부여)

🔹timeline - button

timeline-btn

addlabel : 라벨링
.addLabel('m1') m1이라는 라벨을 추가해서 시작점을 추가함
.to('.box',{x:300},"m1") m1지점에서 동시에 시작
.to('.box',{y:300},"m1") m1지점에서 동시에 시작
restart : 연속해서 재생
메뉴를 만들때 연속재생으로 만들어야 함.
play로 만들면 한번의 클릭밖에 되지 않는다.
계속 클릭했을때 재실행이 되어야 새롭게 시작이 가능하다

timeline-menu

menu.pause(); : menu.to로 시작점을 left0으로 잡아놨기 때문에, 시작시 닫기 버튼이 활성화 되어있다. pause를 통해 모든 것을 정지시켜, 눌렀을 때 호출될 수 있게 함
menu.to().from()처럼, 연속하여 gsap를 지정하면 변수명을 생략할 수 있다

◻️ gsap.scrollTrigger

🔹scrollTrigger - font+li

scrollTrigger-font+li

css

height: 100vh / width : 100vw
v는 뷰포트로, 브라우저의 높이 만큼 가져간다
전체100 절반50

flex: 1 0 100vw
flex-grow(1=늘릴시 기본값 넘어 늘어남) | flex-shrink(0=줄일시 고유 크기 유지) | flex-basis(100vw = 기본 크기)

box here

trigger : 시발점, 타겟의 좌표

start:"top top"

"트리거 기준 윈도우 기준"이 두개가 만나서 실행됨

트리거 기준으로 도달했을때, 윈도우 기준으로 좌표가 도달했을때 함께 실행됨

만약 top 50%이면 윈도우가 50%내려왔을 때 실행됨

end:"bottom top"

"트리거 기준 윈도우 기준"이 두개가 만나서 실행됨

시작부분에서 trigger은 제일 아래까지, window는 상단까지 닿으면 종료

일회성 실행

markers:true

인디케이터 표시

scroller-end/start/end/scroller-start 마킹 부분

scrub:1

부드러운 스크롤을 위해, 스크롤과의 딜레이를 준다

숫자가 커질수록 마우스와의 딜레이 (이미 마우스가 끝까지 갔음에도 딜레이됨)

0일땐 스크롤과 오차가 거의 없다.

scrub을 쓰려면 end가 꼭 있어야한다.

box target

gsap.to('.item',{

item을 보낸다

list로 안한 이유 : list에 width 4000vw정도는 줘야 모든 li를 감당할 수 있는 크기가 나온다. list는 부모라 안된다.

start:"0% 0%" : 스크롤을 다 내릴때까지 움직이고, end에 도달할때 끝.

pin:true

활성 상태에서 트리거 요소 고정

start00와 pin true를 함께 사용한다

end:"+=300%"

시작 부분에서 300%까지 스크롤한 후 종료

원래있던 스크롤에서 스크롤의 영역을 3배(300)로 늘려줌

스크롤이 너무 빨라서 천천히 하기 위함

px로 하고 싶다면, end:+=30