Canvaでアニメーションの順番がおかしい時は、最初の要素の開始位置を少し後ろへずらすと改善する場合があります。
Canvaでアニメーションの開始時間をずらしているのに、思った順番で再生されないことがありませんか？
今回は5STEPの図解にライズを設定して順番に表示させようとしたのですが、タイムラインを調整してもなぜか順番がおかしくなりました。
最終的には解決できましたが、原因を探している途中はかなり混乱しました。同じような状態になった時の参考になればと思います。
Canvaでアニメーションの順番がおかしい時の対処法
原因が分からなかったので、思いつくものを1つずつ確認してみました。
タイムラインをずらしても順番通りにならない
ちゃんと設定したじゃん、なんで？
順番あってるし、レイヤー順も直したけどSTEP2が初めにくる！
5つのSTEPにライズを設定して、タイムラインで0.5秒ずつずらしてみました。
これでSTEP1→STEP2→STEP3→STEP4→STEP5の順に表示されると思ったのですが、なぜか順番がおかしくなります。
最初は設定ミスかと思いました。
- グループ化の方法が違う？
- タイムラインの設定ミス？
- ライズの設定ミス？
- タイムラインのずらし方が足りない？
- Canvaの動作がおかしい？
アニメーションやタイムライン、レイアー順を見直してみましたが、この時点では原因が分かりませんでした。
STEP1を少し後ろへ移動して再生順を整える
STEP2の開始時間を一番最後にしたら、ちゃんと反応してる・・・。全体をずらしてみようか？
いろいろ試している中で、STEP1の開始位置（残り5.0秒から残り4.7秒へ）を少し後ろへ移動してみました。全体で0.5秒ずつは変えていません。
すると今度はSTEP1→STEP2→STEP3→STEP4→STEP5の順で再生されるようになりました。
正確な原因までは断定できませんが、開始位置が0秒付近に重なっていると、再生順が安定しない場合があるのかもしれません。なのでタイムラインをずらしているのに順番がおかしい場合は、一番最初の要素を少し後ろへ移動してみると改善するかもしれません。
まとめ
Canvaでアニメーションの開始時間をずらしても順番通りにならない場合があります。
今回の場合は設定を見直しても原因は分かりませんでしたが、STEP1の開始位置を少し後ろへ移動したところ正常に再生されるようになりました。
同じ現象が起きた場合は、タイムラインの開始位置を少し調整して様子を見てみてください。
次は、イラストや文字を実際に動かしたい人向けに、Canvaでアニメーションを追加する方法をまとめています。
