【GSAP】iPhone SEの紹介ページにあるカーテン演出を再現してみた

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

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

目次非表示

1.実装イメージ
2.HTML
3.CSS
4.JavaScript

1.実装イメージ

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

See the Pen GSAP iPhone by りょーすけ (@s_ryosuke_1242) on CodePen.

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

CDNはコチラ

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

2.HTML

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

<section class="spacer"></section>
  <section class="animaiton-area">
    <div class="copy">
      <h2>
        Lorem ipsum dolor<br>
        consectetur adipiscing<br>
        sed do eiusmod tempor
      </h2>
    </div>
    <div class="phone">
      <img src="https://ryo-sukeblog.net/wp-content/uploads/2022/05/hardware.jpg" alt="端末側面">
    </div>
  </section>
<section class="spacer"></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: 80vh;
}
.animaiton-area{
    width: 100%;
    height: 100vh;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.copy,.phone{
    width: 30vw;
}
.copy{
    position: absolute;
	top: 50%;
    left: 55%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
    color: transparent;
    -webkit-background-clip: text;
    background-image: linear-gradient(90deg , #c31432,#6652e1);
    overflow: hidden;
    background-color: #2e1f7c;
    display: inline-block;
    text-align: left;
    font-size:26px;
}
.phone{
    height: 100%;
    position: relative;
    background-color: #fff;
}
.phone img{
    position: absolute;
	top: 50%;
	right: 0;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

4.JavaScript

最後にJavaScriptです

const tl = gsap.timeline({
    scrollTrigger:{
        trigger:'.animaiton-area',
        start:'center center',
        end:'+=1000',
        pin:true,
        scrub:true,
        markers:true,
        toggleActions:'play none none reverse'
    }
});

tl
.to('.phone',{
    x:'-95%',
})
.from('.copy',{
    scale:.7,
},'<')

今だけ無料プレゼント企画開催中！

現在Twitterにて実務で使ったGSAPの実装事例集を無料プレゼントしています！
・アニメーションナンモワカラン
・何から手つけたらいいのかワカラン
・毎日ツイートしてたWebアニメーションはどうやって実装していたの？
そういった方々の疑問や悩みを解決できるかもしれません

https://twitter.com/e__WebAnimation/status/1629405850275299328

GSAPを使うメリット

・簡単にアニメーション作成が可能
・導入方法が簡単
・プラグインが豊富で特に『ScrollTrigger』が高機能

などなどのメリットがあります！

アニメーション案件等、単価の高い案件ほど使われているライブラリとなります

ぜひ企画に参加して一味レベルが違うコーダーを目指しましょう！