[해피CGI][cgimall] GSAP ScrollTrigger + TextPlugin- 스크롤 트리거 + 텍스트 플러그인

GSAP ScrollTrigger + TextPlugin- GSAP 스크롤 트리거 + 텍스트 플러그인
스크롤시 텍스트가 변합니다. 메인 디자인이나 다이나믹한 디자인을 원하신다면 활용하시면 좋을거  같습니다.

HTML 구조

<section>

  <h1>

    <span>SCROLL</span>

    <span>FOR</span>

    <span>MORE</span>

  </h1>

</section>

 

<section></section>

CSS 소스

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

 

html, body {

  font-family: "Open Sans", serif;

  font-optical-sizing: auto;

  font-weight: 800;

  font-style: normal;

  font-variation-settings: "wdth" 800;

  color:#111;

}

 

section {

  width:100%;

  height:100vh;

  display:flex;

  align-items:center;

  justify-content:center;

}

 

h1 {

  width:32vw;

}

 

h1 span {

  display:block;

  font-size:7vw;

  position:relative;

  margin-bottom:3vw;

  padding:0 1vw;

  width: fit-content;

  --bg:transparent;

}

 

h1 span:after {

  z-index:-1;

  border-radius:1vw;

  content: "";

  width:100%;

  height:33%;

  left:0;

  bottom:0;

  position: absolute;

  background:var(--bg);

}

JS 소스

const arr1 = ["1bb28c","e86a58","fed45b","9bc7c5"]

const arr2 = [...arr1]

const arr3 = [...arr1]

const words2 = ["DON’T","BE","EVIL"]

const words3 = ["NICE TO","MEET","YOU"]

const spans = document.querySelectorAll('h1 span')

const getHexFrom = (arr) => arr.splice( gsap.utils.random(0 ,arr.length-1, 1), 1)

 

const tl = gsap.timeline({

  defaults:{ ease:'none' },

  scrollTrigger:{

    trigger:'section',

    scrub:0,

    pin:'h1',

    start:'0 0',

    end:'100% 0'

  }

})

 

spans.forEach((span,i)=>{

  gsap.set(span,{'--bg':'#'+getHexFrom(arr1)})

  

  tl.add( gsap.to(span, { text:words2[i] }), i)

  tl.add( gsap.to(span, { '--bg':'#'+getHexFrom(arr2), duration:0.15 }), i)

  

  tl.add( gsap.to(span, { text:words3[i] }), i+3)

  tl.add( gsap.to(span, { '--bg':'#'+getHexFrom(arr3), duration:0.15 }), i+3)

})