-
gsap3
용 scroll 플러그인.
Using npm
$ npm install gsap gsap-scroll
Using yarn
$ yarn gsap gsap-scroll
-
예시 사이트
-
기본 예제 코드
import gsap from 'gsap';
import g from 'gsap-scroll';
const container = document.querySelector('.container');
const el = document.querySelector('.box');
const tl = gsap.timeline({ paused: true });
tl.to(el, {y: 400});
const tl2 = gsap.timeline({ paused: true });
tl2.fromTo('#box2',
{x: '-=200px', autoAlpha: 0},
{y: 300, x: 200, autoAlpha: 1}
);
g.progress([tl, tl2], {
triggerEl: '#container',
fixedEl: '#fixed',
duration: 400,
triggerYPercent: 20,
smooth: 0.05,
showIndicator: true,
});