GSAP ScrollTrigger Image Reveal Animation
CODE PREVIEW
Prompt
Create a scroll-triggered image reveal animation using GSAP ScrollTrigger where images slide in from different directions with a smooth overlay effect.
このチュートリアルでは、GSAP ScrollTriggerを使用してスクロールトリガー画像表示アニメーションを作成する方法を紹介します。各画像が異なる方向（左、右、上、下）からスライドインし、スクロールに合わせてカラーオーバーレイがフェードアウトします。
アニメーションはScrollTriggerのscrub機能を使用して、スクロール位置に連動したスムーズな動きを実現しています。各画像ラッパーにはカスタマイズされた開始点と終了点を持つ独自のScrollTriggerインスタンスが設定されています。
紫色のグラデーションオーバーレイは、画像が表示されるにつれて消えていくドラマチックな表示効果を生み出します。キャプションもわずかな遅延でフェードインし、視覚的な面白さを追加しています。
このテクニックは、ポートフォリオサイト、画像ギャラリー、またはスクロールベースのインタラクションを追加したいコンテンツの多いサイトに最適です。
Prompt Overview
This tutorial demonstrates how to create a scroll-triggered image reveal animation using GSAP ScrollTrigger. Each image slides in from a different direction (left, right, top, bottom) with a colored overlay that fades out as you scroll.
The animation uses ScrollTrigger's scrub feature for smooth, synchronized animations tied to scroll position. Each image wrapper has its own ScrollTrigger instance with customized start and end points.
The purple gradient overlay creates a dramatic reveal effect that disappears as the image comes into view. Captions also fade in with a slight delay for added visual interest.
This technique is perfect for portfolio websites, image galleries, or any content-heavy site where you want to add engaging scroll-based interactions.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選