스크롤 트리거를 이용하여 애니메이션을 구현할때 좀 더 디테일한 움직임을 주기 위한 다양한 속성들이 있다.
그중 최근 작업중 가장 많이 사용한 toggleactions, Scrub, stagger, pin 속성에 대해 알아보려 한다.
기본 속성들과 이것들만 알고 있어도 멋진 스크롤 애니메이션이 가능하다!
✔️ 토글액션(toggleactions)
기본 속성만 이용한 애니메이션은 일회성 애니메이션이라 스크롤을 내린 후 다시 올려도 재시작 되지 않는다는 아쉬운 점이 있다. 이때 toggleactions을 사용해 다회성 애니메이션으로 만들 수 있다.
toggleActions은
onEnter, onLeave, onEnterBack, onLeaveBack네 가지로 구성된다.
- onEnter: scroll-start ~ scroll-end 사이
- onLeave : scroll-end부분을 넘어갈 때
- onEnterBack : scroll-start ~ scroll-end 사이로 다시 들어갈 때
- onLeaveBack : scroll-end부분을 다시 넘어갈 때
- 이벤트 제어는
play | restart | reverse | pause | resume
✔️ Scrub
scrub은 간단하면서 자주 쓰이는 기능으로 스크롤이 요소 이전으로 돌아가면 애니메이션 역시 되돌아가는 기능을 말한다.
즉 애니메이션을 재사용 할 수 있는 기능으로 일회성 애니메이션 효과가 아닌 곳에 사용할 수 있다.
- true, 또는 숫자를 입력(숫자가 커질수록 부드러워짐)
✔️ stagger
여러개의 개체가 같은모션을 순자척으로 실행시킬때 사용한다.
- amount: 애니메이션의 전체 소요 시간
ex) amount:1, -> 1초를 박스의 수만큼 나누어서 애니메이션 진행- from: stagger의 시작점을 지정하는 명령로
start, center, end, edges이 있음
✔️ pin
css에서 position: sticky만 사용하다 pin 속성을 알게되면서 고정이 필요한 부분에 좀 더 쉽게 애니메이션을 구현할 수 있었다. 특히 가로스크롤 할때 gsap모션과 pin 속성이 유용했다!
활성화 상태에서 트리거 요소 고정
- pin: true 트리거가 고정
- pin: '.selector' 특정 엘리먼트가 고정
- pinSpacing: true 고정되는 엘리먼트 아래에 padding을 줘서 스크롤이 끝난 후 다음 엘리먼트가 이어서 보일 수 있도록 만들어준다.
pinSpacing: "margin"이렇게 하면 padding 대신 margin을 준다.
📚 Coding Notes