【GSAP】iPhone SEの紹介ページ充電演出を再現してみた

SHARE

今回はJavaScriptのアニメーションライブラリ、『GSAP』を用いてiPhone SEの商品紹介ページでも使用されている充電演出を再現してみました。

これ単体を実務で使用することはないかもしれませんが、何かしら応用できる実装にかもしれません。ぜひ最後までご覧いただけると嬉しいです。

1.実装イメージ

実装イメージは以下の通りです。

See the Pen gsap-battery-charging by りょーすけ (@s_ryosuke_1242) on CodePen.

コピペしてすぐに実務で実装できるようにしております。
注意点としては予め、CDNでプラグインをダウンロードしておきましょう。

CDNはコチラ

必要なファイルは『gsap.min.js』『ScrollTrigger.min.js』の2つです

2.HTML

HTMLはコチラの通りになっています。比較的シンプルですね

<section class="spacer"></section>
  <section class="animate-area">
    <div class="icon">
      <div class="ico-wrapper">
        <img src="https://ryo-sukeblog.net/wp-content/uploads/2022/05/battery.png" alt="" srcset="" class="battery">
        <div class="battery-fill-wrapper">
          <img src="https://ryo-sukeblog.net/wp-content/uploads/2022/05/battery-fill.png" alt="" class="battery-fill">
        </div>
      </div>
    </div>
</section>
<section class="spacer"></section>

3.CSS

次にCSSです。

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    width: 100%;
}
body{
    width: 100%;
}
main{
    width: 100%;
}
.spacer{
    width: 100%;
    height: 90vh;
}
.animate-area{
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon{
    width: 192px;
    height: 92px;
    position: relative;
    margin: 0 auto;
}
.ico-wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.battery-fill-wrapper{
    width: 80%;
    height: 100%;
    overflow: hidden;
    position: absolute;
	top: 50%;
	left: 45%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
}
.battery-fill{
    transform: translateX(-100%);
}
.battery{
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

4.JavaScript

最後にJavaScriptです

gsap.registerPlugin(ScrollTrigger);

gsap.to('.battery-fill',{
    x:0,
    scrollTrigger:{
        trigger:'.animate-area',
        start:'top center',
        end:'+=1000',
        pin:true,
        scrub:true,
        toggleActions:'play none none reverse'
    }
});

前の記事

【GSAP】スクロール位置に連動して画像を広げる方法【コピペO…

次の記事

【GSAP】iPhone SEの紹介ページにあるカーテン演出を…