![見出し画像](https://assets.st-note.com/production/uploads/images/84713863/rectangle_large_type_2_c4c536046248a3fc085a493c4dc979e8.png?width=1200)
シームレスなズーム表示
GSAPの「ExpoScaleEase」でつなぎ目の無いズーム
GSAP(GreenSock Animation Platform)とはWebアニメーションに特化したJaveScriptライブラリです。GSAPを使えば複雑なアニメーションも簡単に実装できる!・・・らしいので、試してみたいと思います。
いろいろな機能があるようですが、今回は「ExpoScaleEase」という機能を試してみたいと思います。画像がどこまでも拡大していくような効果を演出出来そうです。
仕組み自体はシンプルで、登録された画像を滑らかに(カクカクしないで)切り替えていくというものです。今回は16枚の画像を用意しました。
![](https://assets.st-note.com/img/1660472016528-1qM6fj6BFF.png?width=1200)
因みにGifアニメーションだとこんな感じになります。
スピードを上げてもカクカクして、コマ間の継ぎ目を感じますね。
![](https://assets.st-note.com/production/uploads/images/84713372/picture_pc_032a9a553c80f808871bfccf225e2f0c.gif)
GSAPのサンプルコードを書き替えてサーバーにアップして、Webブラウザで開きます。
![](https://assets.st-note.com/img/1660472961726-8RtsE0IKnT.png?width=1200)
結果は・・
コマ間の継ぎ目を補完しているらしく、スムースにズームしているように見えますね。コマの継ぎ目を感じません。どんどん小さな世界に入っていく。という表現に使えそうです!
↓ gifの場合と見比べてくださいね。
この記事が気に入ったらサポートをしてみませんか?