GSAP ScrollTrigger + TextPlugin

gsap-scrolltrigger-textplugin.markdown

GSAP ScrollTrigger + TextPlugin

Inspired by https://scenery.io/scenes/text-sleep-repeat-WcMTh0V9DbP

A Pen by Tom Miller on CodePen.

License.

index.html

<section>
  <h1>
    <span>SCROLL</span>
    <span>FOR</span>
    <span>MORE</span>
  </h1>
</section>

<section></section>

script.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)
})


// Handy trick for smooth screen recording
// gsap.timeline({repeat:-1, repeatDelay:0.5, defaults:{duration:2, ease:'power1.inOut'}})
// .to(window, {scrollTo:innerHeight/2}, 0.5)
// .to(window, {scrollTo:innerHeight}, '+=0.15')
// .to(window, {scrollTo:0}, '+=0.15')

scripts

<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/TextPlugin.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollToPlugin.min.js"></script>

style.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);
}