【GSAP】画面遷移時などに使用できるストライプアニメーション【デモあり】

今回はJavaScriptのアニメーションライブラリ、『GSAP』を用いて画面遷移時などに使用できるストライプアニメーションを作成してみました。

コピペしてすぐに実装できるようにしております。ぜひ最後までご覧いただけると嬉しいです。

目次非表示

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

1.実装イメージ

実装イメージは以下の通りです。
右上の『MENU』ボタンをクリックすることで動作します。

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

注意点としては予め、CDNでプラグインをダウンロードしておきましょう。

CDNはコチラ

必要なファイルは『gsap.min.js』です。

2.HTML

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

<section class="section1">
    <div class="stripeWrapper">
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
    </div>
    <button class="btn">Menu</button>
    <div class="container">
      <ul>
        <li><h2>Lorem ipsum dolor sit amet</h2></li>
        <li><h2>consectetur adipiscing elit</h2></li>
        <li><h2>sed do eiusmod tempor</h2></li>
      </ul>
    </div>
</section>

3.CSS

次にCSSです。

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    width: 100%;
}
body{
    width: 100%;
}
main{
    width: 100%;
}

.section1{
    display: flex;
    align-items: flex-start;
    justify-content: right;
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.stripeWrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.stripe{
    background-color: #212121;
    transform: translateY(-100%);
}
.container{
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
    width: fit-content;
    height: fit-content;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
}
li{
    list-style: none;
    color: white;
    width: fit-content;
    overflow: hidden;
}
h2{
    font-size:60px;
    line-height: 1;
    margin: 0;
    margin-bottom: 40px;
}
.menu ~ .btn{
    color: white;
}
.btn{
    padding: 15px;
    margin: 20px 20px 0 0;
    font-size:80px;
    font-weight: bold;
    position: static;
    z-index: 2;
    cursor: pointer;
    background-color: transparent;
    color: #212121;
    border: none;
}

4.JavaScript

次にJavaScriptです

btn = document.querySelector('.btn')
target = document.querySelector('.stripeWrapper')

btn.addEventListener("click",function(){
    //メニュー閉じる
    if(target.classList.contains("menu")){
        gsap.fromTo('.stripe',{y:"0"},{y:"100%",stagger:{each:.1,from:"end"}})
        gsap.to('.container',{autoAlpha:0})
        target.classList.toggle("menu")
    }else{
        gsap.fromTo('.stripe',{y:"-100%",},{y:"0",stagger:{each:.1,from:"end"}})
        gsap.to('.container',{autoAlpha:1},'-=.8')
        gsap.fromTo('.container h2',{y:"180%"},{y:"0"},'>')
        target.classList.toggle("menu")
    }
})

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

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

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

GSAPを使うメリット

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

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

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

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