[Greensock] GreenSock ScrollTrigger 플러그인

Greensock에 유용한 플러그인이 있어 소개합니다.

새로운 플러그인의 요점은 페이지가 특정 위치로 스크롤 될 때와 특정 요소가 뷰포트에있을 때 애니메이션을 트리거하는 것입니다.

구성 할 수있는 모든 것은 다음과 같습니다.

수년 동안 많은 스크롤 위치 라이브러리가 있었지만 Greensock은 API와 성능을 바로 잡는 요령을 가지고 있습니다.

원하는 것은 애니메이션을 트리거하는 것이기 때문에 이제 Greensock을 사용하여 확인할 수 있습니다. 

코드펜에서 바로 연결해서도 사용할 수 있습니다.

See the Pen GSAP ScrollTrigger - Demo by Noel Delgado (@noeldelgado) on CodePen.

See the Pen ScrollTrigger: SVG Text Mask by Tom Miller (@creativeocean) on CodePen.

See the Pen GSAP ScrollTrigger - Marquee Page Border by Ryan Mulligan (@hexagoncircle) on CodePen.

See the Pen Animate path on scroll - ScrollTrigger by GreenSock (@GreenSock) on CodePen.

See the Pen Scroll progress & gsap ScrollTrigger by Louis Hoebregts (@Mamboleoo) on CodePen.

 

 

너무 많은 동작이 걱정되는 경우 CSS 미디어 쿼리와 JavaScript로 모두 사용할 수있는 prefers-reduced-motion을 통해 책임감있게 수행 할 수 있습니다.

 

 

출처 : css-tricks.com/greensock-scrolltrigger/?fbclid=IwAR0sCLbeAXwCAb_CJ7_453-68FXD6NWFIEUr213KCMUVlMtecc903Klr8EA