GSAP

GSAP

【GSAP】expoScaleのカスタマイズ方法

今日は「expoScale」について詳しく説明していきたいと思います。基本の使い方このイージングを使用するためには、「EasePack」というファイルが必要です。公式サイトにインストールの方法が書かれているので、こちらを参考にファイルを取り...
GSAP

【GSAP】イージングの種類について

今日はGSAPで使用できるイージングの種類について説明します。GSAPでは、様々な種類のイージングが用意されています。もちろん、自分でカスタマイズすることも可能ですが、今日はすでに用意されているイージングの種類についてみていきたいと思います...
GSAP

【GSAP】トゥイーン特有のデフォルト値を変える

tween(トゥイーン)とは、between(ビトゥイーン:2つのものの間に)から由来する言葉で、2つのイラストが変化しながら繋がるアニメーションのことをいうそうです。今日はこのトゥイーン特有のプロパティのデフォルト値を変更する方法について...
GSAP

【GSAP】デフォルトの単位を変更する

GSAPでは基本的に単位を省略して記述します。それは、デフォルトの単位が設定されているからです。では、デフォルトの単位以外を使用したいときはどうすればよいでしょう。今日はデフォルトの単位を変更する方法について説明します。デフォルトの単位につ...
GSAP

【GSAP】アニメーションを繰り返す

今日はアニメーションを繰り返し再生する方法を解説します。アニメーションを任意の回数繰り返す方法、繰り返しの際に待機時間を設定する方法を説明します。repeatまずはアニメーションを繰り返し再生する方法です。以下のサンプルをご覧ください。 S...
GSAP

【GSAP】gsap.fromTo()の使い方を解説

本日は.fromTo()の使い方について説明します。.fromTo()は、.to()と.from()の両方の性質をあわせもっています。両者と比較しながら、fromTo()について理解を深めていきましょう。基本の使い方まずは基本的な記述方法で...
GSAP

【GSAP】gsap.from()の使い方を解説

本記事では、gsap.from()の使い方を説明します。前回説明したgsap.to()との違いも解説しています。基本の使い方前回解説したgsap.to()が元々配置した位置からGSAPによって指定した位置まで動く、というものだったのに対し、...
GSAP

【GSAP】gsap.to()の使い方を解説

gsap.to()は、アニメーションの完了位置(どれくらいの距離を動いてどの形でアニメーションが完了するのか)を指定することで、元々あった位置から完了位置までの動きをつけるものです。位置を指定するのに、cssプロパティのtransformで...