GSAP ScrollTrigger - Demo

gsap-scrolltrigger-demo.markdown

GSAP ScrollTrigger - Demo

A Pen by Noel Delgado on CodePen.

License.

index.haml

- w = 1240
- h = 874

.loader.df.aic.jcc
  %div
    %h1 Loading
    %h2.loader--text 0%

.demo-wrapper
  %header.df.aic.jcc
    %div
      %h1 ScrollTrigger
      %h2 demo

  %section.demo-text
    .wrapper.text
      ABCDEFGHIJKLMNOPQRSTUVWXYZ

  - (1..4).each do |i|
    %section.demo-gallery
      %ul.wrapper
        - (1..rand(3..4)).each do |i|
          %li
            %img{:src=>"https://source.unsplash.com/random/#{w}x#{h}?sig=#{rand(0..206)}", :width => w, :height => h}

  %section.demo-text
    .wrapper.text
      ABCDEFGHIJKLMNOPQRSTUVWXYZ

  %footer.df.aic.jcc
    %p Images from <a href="https://unsplash.com/">Unsplash</a>

script.babel

gsap.registerPlugin(ScrollTrigger);

const images = gsap.utils.toArray('img');
const loader = document.querySelector('.loader--text');
const updateProgress = (instance) => 
  loader.textContent = `${Math.round(instance.progressedCount * 100 / images.length)}%`;

const showDemo = () => {
  document.body.style.overflow = 'auto';
  document.scrollingElement.scrollTo(0, 0);
  gsap.to(document.querySelector('.loader'), { autoAlpha: 0 });
  
  gsap.utils.toArray('section').forEach((section, index) => {
    const w = section.querySelector('.wrapper');
    const [x, xEnd] = (index % 2) ? ['100%', (w.scrollWidth - section.offsetWidth) * -1] : [w.scrollWidth * -1, 0];
    gsap.fromTo(w, {  x  }, {
      x: xEnd,
      scrollTrigger: { 
        trigger: section, 
        scrub: 0.5 
      }
    });
  });
}

imagesLoaded(images).on('progress', updateProgress).on('always', showDemo);

scripts

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js"></script>

style.postcss

:root { font-size: 16px }
@media (max-width: 500px) { :root { font-size: 14px } }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::selection {
  background: #87cd33;
  color: white;
}

body {
  overflow: hidden;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
}

h1 { font-size: 5rem }
h2 { font-size: 2rem }

img {
  width: 100%;
  height: auto;
  background: #f0f0f0;
}

ul {
  padding-left: 1rem;
  list-style: none;
}

li {
  flex-shrink: 0;
  width: clamp(500px, 60vw, 800px);
  padding-right: 1rem;
}

header {height: 100vh}
footer {height: 50vh}

:any-link { color: #4e9815; }

.df {display: flex}
.aic {align-items: center}
.jcc {justify-content: center}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
  color: white;
}

.demo-wrapper {
  overflow-x: hidden;
}

.wrapper {
  display: flex;
}

.demo-gallery:not(.last) {
  padding-bottom: 1rem;
}

.demo-text .text {
  font-size: clamp(8rem, 15vw, 16rem);
  line-height: 1;
  font-weight: 900;
}