アニメーションを作成する際の便利ライブラリで横スクロールコンテンツを作成したのでメモします。

GSAPを実装する

ライブラリを設定しましょうCDNは以下です。

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

今回はスクロールをトリガーとするのでScrollTrigger.min.jsも使用します。

javascriptを記述する

ファンクションとなるjavascriptを記述します。

javascript

const wrapper = document.querySelector(".js-wrapper");
if (wrapper) {
const slides = gsap.utils.toArray(".js-scroll");
const wrapperWidth = wrapper.offsetWidth;
// 横スクロールアニメーションの設定
const horizontalTimeline = gsap.to(slides, {
xPercent: -100 * (slides.length - 1),
ease: "none",
scrollTrigger: {
trigger: wrapper,
pin: true,
scrub: 1, 
end: `+=${wrapperWidth}`,
},
});
}

-X軸方向に移動にします。

xPercent: -100 * (slides.length - 1)

アニメーション開始のトリガー要素を設定します。

trigger: wrapper,

要素を固定する。

pin: true,

スクロール量に合わせてアニメーションします。

scrub: 1,

アニメーションが終わる位置を設定します。

end: `+=${wrapperWidth}`,

基本的にはこれだけで動作します。

デモはこちら

フェードインアニメーションを追加する

スクロールでコンテンツが表示されたらフェードインで表示されるようにしてみます。
基本のスクリプトにアニメーションしたいパーツの変数を追加し、それぞれにスクリプトを記述します。
今回はイメージとその上に表示されているテキストをアニメーションにしました。

javascript

const wrapper = document.querySelector(".js-wrapper");
if (wrapper) {
const slides = gsap.utils.toArray(".js-scroll");
const wrapperWidth = wrapper.offsetWidth;
const texts = gsap.utils.toArray('.side-scroll-item p');
const imgs = gsap.utils.toArray('.side-scroll-item img');
// 横スクロールアニメーションの設定
const horizontalTimeline = gsap.to(slides, {
xPercent: -100 * (slides.length - 1),
ease: "none", 
scrollTrigger: {
trigger: wrapper,
pin: true,
scrub: 1,
end: `+=${wrapperWidth}`,
},
});

texts.forEach((text, i) => {
gsap.fromTo(text, { autoAlpha: 0 }, {
autoAlpha: 1,
duration: 1,
scrollTrigger: {
trigger: text,
containerAnimation: horizontalTimeline,
start: "left center",
toggleActions: "play none none reverse"
}
});
});

imgs.forEach((images, i) => {
gsap.fromTo(images, { autoAlpha: 0 }, {
autoAlpha: 1,
duration: 1,
scrollTrigger: {
trigger: images,
containerAnimation: horizontalTimeline,
start: "left center",
toggleActions: "play none none reverse"
}
});
});


}

テキストとイメージ変数を定義します。

const texts = gsap.utils.toArray('.side-scroll-item p');
const imgs = gsap.utils.toArray('.side-scroll-item img');

テキストアニメーションを設定します。

texts.forEach((text, i) => {
gsap.fromTo(text, { autoAlpha: 0 }, {
autoAlpha: 1,
duration: 1,
scrollTrigger: {
trigger: text,
containerAnimation: horizontalTimeline,
start: "left center",
toggleActions: "play none none reverse"
}
});
});

イメージアニメーションを設定します。

imgs.forEach((images, i) => {
gsap.fromTo(images, { autoAlpha: 0 }, {
autoAlpha: 1,
duration: 1,
scrollTrigger: {
trigger: images,
containerAnimation: horizontalTimeline,
start: "left center",
toggleActions: "play none none reverse"
}
});
});

これでそれぞれにアニメーションが追加されます。

デモはこちら

まとめ

横スクロールを可能にするライブラリは、いくつかありますがGSAPは比較的簡単に実装できます。
またアニメーションのオプションも豊富なので、表現の幅が広がりますね。