Lpla 개발 블로그

JavaScript/실전

[GSAP] 예제 - Pin과 timeline으로 요소 등장

GSAP ScrollTrigger의 Pin과 timeline을 사용하여 효과를 구현하고자 한다. 어떤 지점에 도달하면 스크롤 하더라도 배경은 유지된 채, 수평 방향에서 요소가 등장하는 효과다. 배경을 유지하는 것은 pin, 요소가 등장하는 것은 timeline으로 구현할 수 있다. 최종 결과물 1. 준비 head에 GSAP와 ScrollTrigger를 추가하고 하단에 자바스크립트 외부 파일을 추가했다. 2. HTML, CSS section1 section2 1 2 3 section3 section4 body에 section 요소 4개를 추가했다. 여기서 화면이 고정될 요소는 section2다. 즉 pin을 section2에 부여할 것이다. 그리고 pin이 유지되는 동안 서서히 나타나게 될 요소들은 box..