GSAP 【GSAP】スクロールに連動させてテキストをアニメーションさせる
以前ScrollTriggerを使ってセクションを横スクロールさせる方法を紹介したのですが、セクションや画像ではなく、テキストをスクロールに連動させて横方向に動かすことはできるのか気になったので、試してみました。時々、途中でテキストが横切っ...
2024-11
GSAP 
GSAP 【GSAP】ScrollTriggerを使って横スクロールさせる
操作は縦にスクロールさせる動きなのに、表示は横スクロールの動きになるサイトを時々見かけます。このような動きは、GSAPのScrollTriggerを使用することで簡単に実装することができます。ユーザーは縦スクロールの動きだけですべてのコンテ...
GSAP 【GSAP】keyframesを使ったアニメーション
ひとつの要素を複数のトゥイーンでアニメーション化するとき、timeline を使って制御する方法だけでなく、keyframes を使ってアニメーションを制御する方法もあります。公式サイトの言葉を借りれば、「キーフレームはトゥイーン内にネスト...
GSAP 【GSAP】staggerを使ったアニメーション
GSAPでは、アニメーションを制御するときに「stagger」というプロパティを使用することができます。このプロパティでは、トゥイーンに複数のターゲットがある時に、各アニメーションの開始間に遅延を追加することができます。staggerにもい...
java script 【java script】グリッド状に要素を自動生成する
先日GSAPの公式サイトを見ていたら、デモでグリッド状に要素を自動生成するjava scriptが使用されていました。生成される要素の幅が、ウィンドウ幅に合わせて可変するタイプではなかったのですが、可変した方が便利だよね、ということで自分で...
GSAP 【GSAP】gsap.utils.toArray( )の使い方
utils.toArray( )は、GSAPのメソッドのうちのひとつで、例えば複数の要素に同じアニメーションをつけたり、複数の要素に順番にアニメーションを適用したい時や、遅延を追加したいときなどに使うと便利です。記事中では、utils.toArray( )を使用したアニメーションの例も載せています。また、java scriptのquerySelectorAll() メソッドとの違いについても解説しています。
GSAP 【GSAP】ScrollTriggerを使ったアニメーション
GSAPのプラグイン「ScrollTrigger」を使用すると、スクロールに連動したアニメーションを作成することができます。この記事では「スクロールして要素が画面に表示された時にテキストがフェイドインする」というアニメーションを例に挙げて「ScrollTrigger」の使い方について説明します。