このドキュメントは、Framerを学びたい国内のユーザーが日本語の資料不足で困ることを解消するために作成されました。公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しています。Framerを使う皆さんのお役に立てれば幸いです。

Framer YouTube チャンネルを購読してください

回転するビデオグリッドを作成する方法

ステップ1: ページと基本フレームの設定

Framerで新しいページを作成します。

1. フレーム(F)を追加し、横全体に広がるように配置します。

   • 高さは約1000pxに設定し、 Height → Viewport に変更して全画面の高さに合わせます。

   • Fillを除去します。

2. このフレームの中に正方形フレームを追加します。

   • サイズは 幅=高さ に設定し（チュートリアルでは970に設定）、中央に配置します。

   • Fillを除去します。

   • 名前をContainerに変更します。

   • このコンテナがビデオグリッドを収める領域になります。

ステップ2: ビデオグリッドの配置

1. まず、中央に配置するビデオをコンテナの中心に置きます。

   • 必ず正確に中心に合わせてください。

2. 残りのビデオをグリッド形式で配置します。

   • すべてのビデオがコンテナ内に収まるように整列させます。

ステップ3: コンテナにスクロールアニメーションを適用

グリッドが準備できたので、回転を適用してみましょう。

1. すべてのビデオが含まれるコンテナを選択し、Scroll Transform効果を追加します。

2. スクロール時に次のように変換が行われるように設定します。
   初期状態: Opacity 1, Scale 1, Rotation 0
   スクロール時: Opacity 1, Scale 1, Rotation 450

こうすると、スクロールに応じてコンテナ全体が回転する効果が得られます。

ステップ4: ビデオに反対方向の回転を適用

コンテナが回転すると、その中のビデオも一緒に回転してしまいます。しかし、私たちはビデオをその場に固定されたように見せたいです。

1. コンテナ内のすべてのビデオを選択し、Scroll Transformを追加します。

2. 同様にスクロール変形効果を適用しますが、反対方向に回転させます。
   初期状態: Opacity 1, Scale 1, Rotation 0
   スクロール時: Opacity 1, Scale 1, Rotation -450

これにより、コンテナは時計回りに回転しますが、ビデオは反対方向に回って画面に固定されているような視覚効果を作り出します。

ステップ5: ビデオサイズの調整

• 回転時のクリッピング（切断）を防ぐため、ビデオのサイズを大きくする必要があります。

• すべてのビデオを選択し、コンテナに対して170%のサイズに設定します。

ステップ6: スクロール位置の固定

コンテナがスクロールされて画面外に消えないように設定する必要があります。最も外側のフレーム(Height = Viewport)を選択し、Position → Fixed に変更します。こうすることで、コンテナは固定され、スクロールアニメーションのみ適用されます。

追加作業

1. スケール効果の追加

   • コンテナのScroll Transformで、Scaleを調整して、よりダイナミックな効果を作成します。

   • 例: 最終状態で Scale 2.0 設定 → 回転とともに拡大される感じを演出。

2. インタラクション(Overlay)の追加

   • 中央のビデオの上にPlayボタンを配置します。

   • ボタンクリックでOverlayが開くように設定します。（Overlay内には全画面ビデオが配置され、閉じる機能を追加して元に戻れるようにします）

これで、Framerでコードを使わずTwitterで見た回転するビデオグリッド効果が完成します。
このチュートリアルのように、FramerではDrag、Scroll Transform、Overlayといった機能だけで、複雑なコードを書かずに強力なインタラクションを実現できます。

効果およびリミックスプロジェクトを見る→

この記事はFramer公式ブログの‘Create a rotating video grid in Framer’を翻訳・アレンジしたコンテンツです。