アニメーション

以前ScrollTriggerを使ってセクションを横スクロールさせる方法を紹介したのですが、セクションや画像ではなく、テキストをスクロールに連動させて横方向に動かすことはできるのか気になったので、試してみました。時々、途中でテキストが横切っ...

操作は縦にスクロールさせる動きなのに、表示は横スクロールの動きになるサイトを時々見かけます。このような動きは、GSAPのScrollTriggerを使用することで簡単に実装することができます。ユーザーは縦スクロールの動きだけですべてのコンテ...

ひとつの要素を複数のトゥイーンでアニメーション化するとき、timeline を使って制御する方法だけでなく、keyframes を使ってアニメーションを制御する方法もあります。公式サイトの言葉を借りれば、「キーフレームはトゥイーン内にネスト...

GSAPでは、アニメーションを制御するときに「stagger」というプロパティを使用することができます。このプロパティでは、トゥイーンに複数のターゲットがある時に、各アニメーションの開始間に遅延を追加することができます。staggerにもい...

GSAPのプラグイン「ScrollTrigger」を使用すると、スクロールに連動したアニメーションを作成することができます。この記事では「スクロールして要素が画面に表示された時にテキストがフェイドインする」というアニメーションを例に挙げて「ScrollTrigger」の使い方について説明します。