GSAP 【GSAP】スクロールに連動させてテキストをアニメーションさせる
以前ScrollTriggerを使ってセクションを横スクロールさせる方法を紹介したのですが、セクションや画像ではなく、テキストをスクロールに連動させて横方向に動かすことはできるのか気になったので、試してみました。時々、途中でテキストが横切っ...
GSAP
GSAP 
GSAP 【GSAP】ScrollTriggerを使って横スクロールさせる
操作は縦にスクロールさせる動きなのに、表示は横スクロールの動きになるサイトを時々見かけます。このような動きは、GSAPのScrollTriggerを使用することで簡単に実装することができます。ユーザーは縦スクロールの動きだけですべてのコンテ...
GSAP 【GSAP】keyframesを使ったアニメーション
ひとつの要素を複数のトゥイーンでアニメーション化するとき、timeline を使って制御する方法だけでなく、keyframes を使ってアニメーションを制御する方法もあります。公式サイトの言葉を借りれば、「キーフレームはトゥイーン内にネスト...
GSAP 【GSAP】staggerを使ったアニメーション
GSAPでは、アニメーションを制御するときに「stagger」というプロパティを使用することができます。このプロパティでは、トゥイーンに複数のターゲットがある時に、各アニメーションの開始間に遅延を追加することができます。staggerにもい...
GSAP 【GSAP】gsap.utils.toArray( )の使い方
utils.toArray( )は、GSAPのメソッドのうちのひとつで、例えば複数の要素に同じアニメーションをつけたり、複数の要素に順番にアニメーションを適用したい時や、遅延を追加したいときなどに使うと便利です。記事中では、utils.toArray( )を使用したアニメーションの例も載せています。また、java scriptのquerySelectorAll() メソッドとの違いについても解説しています。
GSAP 【GSAP】ScrollTriggerを使ったアニメーション
GSAPのプラグイン「ScrollTrigger」を使用すると、スクロールに連動したアニメーションを作成することができます。この記事では「スクロールして要素が画面に表示された時にテキストがフェイドインする」というアニメーションを例に挙げて「ScrollTrigger」の使い方について説明します。
GSAP 【GSAP】アニメーションの順番やタイミングを管理する
GSAPでは、timelineという、あらかじめ決められた順番でアニメーション処理を行うためのツールがあります。このツールを使用することで、アニメーションの順番やタイミングを簡単に管理することができます。もちろんタイムラインを使わなくてもア...
GSAP 【GSAP】.set( )の使い方
今日は .set() の使い方について説明します。.set() は、対象のプロパティを設定することができるメソッドです。アニメーションはありませんが、対象を配置する場所を設定することができます。継続時間０の .to() と同じ働きをするため...
GSAP 【GSAP】slowMoのカスタマイズ方法
今日はslowイージングのカスタマイズ方法についてです。アニメーションの途中で、まるでスローモーションになったかのような動きをつけることができます。基本の使い方このイージングを使用するためには、「EasePack」というファイルが必要です。...
GSAP 【GSAP】roughイージングのカスタマイズ方法
今日はイージング「rough」のカスタマイズ方法について説明していきたいと思います。ジグザグで面白い動きが出せる「rough」。かなり細かいところまで自分でカスタマイズできるようになりますよ。基本の使い方このイージングを使用するためには、「...