はじめに
自分用メモ。
ローディングは独立した待ち時間として切るより、次画面の導入にそのままつなげた方が自然に見える。ローダーを消して終わりにせず、収束の動きを次へ渡すのがポイント。
このサンプルではオーブの揺れをそのまま次画面の空気感へつないでいる。切り替えの違和感を減らしたいときの型として残しておく。
組み合わせのポイント
- 最初は待機中だと分かるように、単純すぎない揺れで時間を見せる
- 準備完了のタイミングではローダーを急に消さず、まとまりながら次へ渡す
- 次画面は一拍遅れて見せることで、切り替えより遷移として感じやすくする
- 背景色や光のトーンを共有して、別画面に見えすぎないようにする
- 読み込み演出の長さは必要以上に引き延ばさず、気持ちよさを優先する
実装のポイント
- オーブ要素は配列生成して ref に貯め、まとめて同じ tween に流す
- ローダーと本画面は別 ref で持ち、非表示と表示を timeline でつなぐ
- 準備完了は
gsap.delayedCall()を起点にして、切り替えの開始点を 1 か所にまとめる - 本画面の出現は
fromTo()で初期位置を固定し、ローダー終了との接続を明確にする
まとめ
覚えておくことは、ローディング自体を見せるより次画面への受け渡しを考えること。待ち時間を消せなくても、流れを切らなければ印象はだいぶ変わる。