簡単な設定でできるアニメーション
Framerならコードを書かずに、しかも簡単な設定だけでアニメーションやエフェクトを設定できます。スクロールやクリック、ループなどできることも豊富です。
設定できる豊富な項目
アニメーションの設定は右パネルのEffects（エフェクト）から設定可能です。設定できる項目は以下です。
Appear（アピアー）→要素が画面内に出現した時、自動的に発動
Hover（ホバー）→マウスカーソルをホバーした時に発動
Press（プレス）→クリックしている間発動
Loop（ループ）→自動繰り返すアニメーション
Drag（ドラッグ）→クリック＆ドラッグで要素を動かすことができる
Scroll Animation（スクロールアニメーション）→Appear（アピアー）とほぼ同じ。ビューポート内の上部・中央・下部どこに要素が入った時に発動するか条件を指定できる。
Scroll Speed（スクロールスピード）→パララックスなどで使用。90％と指定すると、スクロールされて画面上部に行くまでの速度を本来より10%遅くする。110%などにすると早くなる。
Scroll Transform（スクロールトランスフォーム）→スクロールに合わせてアニメーションする。アニメーション途中にスクロールを止めれば、アニメーションも途中で止まる。
Scroll Variants（スクロールバリアント）→複数のバリアントをスクロールによって切り替えられる。スクロールによって画像が切り替わるなどのアニメーションを作ることができる。
実装例（動画）
実際にアニメーションを設定している様子をいくつかの例で紹介します。
下からフワッと表示されるアニメーション
スクロールに沿って要素が左右に移動するアニメーション
トランジション（Transition）
Framerでは、アニメーションの動きを自然で滑らかに見せるために、イージング（Ease）とスプリング（Spring）の設定が用意されています。
イージング (Ease)
イージングは、アニメーションの速度が時間に応じてどのように変化するか（加速や減速の仕方）を決めるトランジションタイプです。自然な動きや感覚を作るために重要です。
ease: 自然な加速と減速を持つ基本的なイージング。
ease-in: 動き始めがゆっくりで、その後加速する。
ease-out: 動き始めが速く、終わりに向けてゆっくり減速する。
ease-in-out: 始まりと終わりがゆっくりで、中間部分が速い。
linear: 一定速度で移動する（イージングなし）。
スプリング (Spring)
スプリングはバネのような動きをシミュレーションするトランジションで、反動や自然な動きを持たせることができます。スプリングは物理的な特性を利用してアニメーションを計算するため、設定次第でリアルな動きを再現できます。
damping（ダンピング）：
動きの減衰率を決めます。値が高いほど、バネの反動が少なくなります（動きが速く静止する）。
例:
damping: 20→ 反動なしで素早く静止例:
damping: 5→ バネのような反動が目立つ動き
stiffness（スティフネス）：
バネの硬さを決めます。値が高いほど動きが速くなり、値が低いほど柔らかい動きになります。
例:
stiffness: 100→ 硬いバネの動き例:
stiffness: 10→ 柔らかくゆっくり動く
mass（質量）：
動いている物体の重さをシミュレーションします。質量が大きいほど動きがゆっくりになります。
例:
mass: 1→ 軽い例:
mass: 5→ 重い
←