텍스트 사이에 이미지가 스크롤 하면 나타나는 스크롤 애니메이션

Inspired by Codrops

텍스트 사이에 이미지 넣고 처음에는 width:0 으로 안보이게,
스크롤 하면 정해진 크기로 이미지가 커지게하는 스크롤 애니메이션입니다.

워드프레스에서는 html 코드 그대로 넣고,
CSS와 GSAP으로 구현하면 됩니다.

Idea 1. 텍스트 사이에 이미지 넣기

HTML 구조

<div class="text-box">
Building <br>
  Stronger Brands<br>
Creating<br>
  Meaningful 
  <span class="ani-box">
    <span class="img-box">
      	<span class="inner-img"></span>
  </span>
  </span>
  <span> Connections.</span>
  
</div>

Idea 2. 스크롤 하면 이미지 나타나서 커지게 하기

<script>
document.addEventListener("DOMContentLoaded", function () {
    gsap.registerPlugin(ScrollTrigger);

    gsap.to(".img-box", {
        width: "450px", 
        height:"220px", 
        duration: 1,
        ease: "power2.out",
        transformOrigin: "top", 
        scrollTrigger: {
            trigger: ".text-box",
            start: "top 35%",
            end: "top top",
            scrub: 1
        }
    });
});
</script>

text-box의 top이 35% 지점에 가면 애니메이션 시작
width, height, radius 등을 조정해서 다양한 모양의 애니메이션을 구현할 수 있습니다.