Parallax Part2

이미지 애니메이션 주기

이 코드 섹션은 #section01의 이미지에 대해 애니메이션을 적용하는 부분입니다. ani1 타임라인을 생성하여 이미지가 720도 회전하고 크기가 줄어들며, 경계 반지름도 변경됩니다.

const ani1 = gsap.timeline();

ani1.to("#section01 .img", { rotation: 720, scale: 0, borderRadius: 200 })
ani1.to("#section01 .img", { rotation: 0, scale: 1, borderRadius: 20 })

ScrollTrigger.create({
    animation: ani1,
    trigger: "#section01",
    start: "top top",
    end: "+=2000",
    scrub: true,
    pin: true,
    anticipatepin: 1,
    markers: false
});

ScrollTrigger를 사용하여 해당 애니메이션을 트리거하고, 스크롤 위치에 따라 제어하고.

첫 번째 섹션의 이미지가 스크롤을 해도 화면에 고정되어서 회전하고 크기가 변화하는 애니메이션을 만들어보았습니다.

이미지 순차적으로 나오게하기

이 부분은 #section02에서 이미지들이 순차적으로 나타나는 애니메이션을 구현합니다. ani2 타임라인을 생성하여 각 이미지들이 순차적으로 나타나도록 정의됩니다.

const ani2 = gsap.timeline();
ani2.from("#section02 .i1", { y: -100, autoAlpha: 0, borderRadius: 200 }, 'a')
    .from("#section02 .i2", { y: 100, autoAlpha: 0, borderRadius: 200 }, '+=2')
    .from("#section02 .i3", { y: -100, autoAlpha: 0, borderRadius: 200 }, 'a')
    .from("#section02 .i4", { y: 100, autoAlpha: 0, borderRadius: 200 }, 'b')

    ScrollTrigger.create({
    animation: ani2,
    trigger: "#section02",
    start: "top top",
    end: "+=2000",
    scrub: true,
    pin: true,
    anticipatePin: 1,
    markers: false
});

이 부분은 두 번째 섹션에서 이미지가 스크롤을 내려도 화면에 고정되며 순차적으로 나타나는 애니메이션을 구현했습니다.