【GSAP】iPhone SEの商品紹介ページで使用されていたトランプ演出を再現

<section class="spacer"></section>
  <section class="animaiton-area">
    <h2 class="headline">
      Lorem ipsum<br>
      dolor sit<br>
      consectetur<br>
      adipiscing <br>
      Retina<br>
      elit<br>
      eiusmod <br>
      incididunt <br>
      dolore 
    </h2>
    <img src="https://ryo-sukeblog.net/wp-content/uploads/2022/05/mockup01.png" class="img01">
    <img src="https://ryo-sukeblog.net/wp-content/uploads/2022/05/mockup02.png" class="img02">
    <img src="https://ryo-sukeblog.net/wp-content/uploads/2022/05/mockup03.png" class="img03">
  </section>
<seciton class="spacer"><div class="block"></div></seciton>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    width: 100%;
}
body{
    width: 100%;
}
main{
    width: 100%;
}
.animaiton-area{
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spacer{
    width: 100%;
    height: 50vh;
    background-color: #222;
}
.block{
    width: 100%;
    height: 300px;
    background-color: #222;
}
.animaiton-area img{
    max-height:95vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.headline{
    font-size: 20px;
    display: inline-block;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(90deg,#2e1f7c,#6652e1);
    will-change: transform;
    padding-top: 0.5px;
    overflow: hidden;
}

const tl = gsap.timeline({
    scrollTrigger:{
        trigger:'.animaiton-area',
        start:'center center',
        // markers:true,
        pin:true,
        scrub:true,
        toggleActions:'play none none reverse'
    }
});
tl
.to('.headline',{x:'170px'},'<')
.to('.img03',{x:'-15%',scale:.95},'<')
.to('.img02',{x:'-60%',scale:.90},'<')
.to('.img01',{x:'-100%',scale:.85},'<')