green sock 응용이다!!

! 생각보다 빠르게 응용 편을 가지고 왔다 !

 

See the Pen gsap0 by kimjihyun (@jihyun998) on CodePen.

 

 

 

 

박스별로 설명을 시작하겠습니다.

 

 pink  {

• 윈도우가 로드되면 알아서 실행합니다.
• x 500px 를 3초에 걸려 이동합니다.

}

 

 orange  {

• scrub 스크롤이 요소 이전으로 돌아가면 애니메이션도 되돌아가는 기능을 말한다.
  기본값은 true 이지만 숫자를 기입하는 게 더 자연스럽다.
• toggleActions: ( onEnter onLeave onEnterBack onLeaveBack ) 
  기본값 ( play none none none )
  orange는 스크롤시 시작하고 다시 돌아가면 반대로 시작한다. 

}

 

 green  {

• timeline tl(타임라인 변수명) green부터 시작이다.
• 1초에 걸려 scale : 2, x : 200, opacity : 0.5로 변경된다.
• 다음 timeline 위에 애니메이션이 원상 복구되며 다음 애니메이션으로 변경된다.

}

 

 lightblue  {

• timeline tl green요소 애니에이션을 완료한뒤 실행한다.
• x 400px 이동을 steps(7)번 으로 나눠 실행된다.
• 콜백 함수(애니메이션 끝나고 난 뒤) onComplete: motionOncomplete 함수를 실행한다.

}

 

 black  {

• lightblue 애니메이션이 끝나고 난 뒤 콜백 함수에 호출되어 실행된다.
• 3초에 걸려 border, borderRadius, backgroundColor 가 변경된다.

}

 

 gray  {

• 시작점 : 중간지점
• 끝점 : .purple 요소를 직접 넣어도 된다.
• 지금 보이는 markers 는 .gray기준으로 만든 것이다.
• 콜백 함수 ( onUpdate: self )를 사용하여 요소의 현재 값을 가져올 수 있다.
  self.progress.toFixed(3) ---------- 애니메이션 진행률
  self.direction --------------------- 방향을 반영 스크롤 내릴 때 1 / 올릴 때 -1
  self.getVelocity() ----------------- 초당 픽셀 단위로 스크롤 속도
• self.direction의 2가지 값( 1 , -1 )을 이용하여
  스크롤을 내리면 x : 500px 이동
  스크롤을 올리면 x : 0px 이동

}