htmljquerycssgsapscrolltrigger

Horizontal GSAP pinning with ScrollTrigger

I just created pen in CodePen for my demo. I try with different states but did not work. I want to add and remove class in middle section like this: https://codepen.io/Designer12/pen/qBryyrp

Demo image:

Demo image

Solution

  • Added the onUpdate event, divided the progress (from zero to 1) by the number of elements (panels) and get the active frame:

    Better check Codepen answer, snippet have some lags

    gsap.registerPlugin(ScrollTrigger);
console.clear()
let container = document.querySelector(".portfolio");
let tl = gsap.timeline({
  scrollTrigger: {
    pin: true,
    scrub: 1,
    trigger: container,
    end: () => container.scrollWidth - document.documentElement.clientWidth,
  onUpdate: ({progress, direction, isActive}) => changeActive(progress)
  },
  defaults: { ease: "none", duration: 1 }
});
tl.to(".parallax", { x: 300 })
  .to(".panel", { x: () => -(container.scrollWidth - document.documentElement.clientWidth) }, 0)
  .from(".secondAn", {
    opacity: 0,
    scale: 0.5,
    duration: 0.2,
    stagger: {
      amount: 0.8
    }
  }, 0);

gsap.from(".firstAn", {
  duration: 1,
  opacity: 0,
  scale: .5,
  scrollTrigger: {
    trigger: container,
    start: "top 90%",
    end: "bottom 10%",
    toggleActions: "play none none reverse"
  }
});

let elements = document.querySelectorAll('.panel')
let active = NaN;
function changeActive(progress){
  let oneElement = 1 / (elements.length - 1)
  let activeItem = Math.round(progress.toFixed(3) /oneElement)
  if(active != activeItem){
      active = activeItem
      changeBackground(active)
  }
  console.log("active ", activeItem)
}

function changeBackground(active){
  elements.forEach((e)=>{
      e.classList.remove("bg")
  })
  console.log(active, elements.length)
  elements[active].classList.add("bg")
}
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');

*, *:before, *:after {
    box-sizing: border-box;
    position: relative;
    letter-spacing: 0.04em;
}
body { 
  font-family: 'Montserrat', sans-serif;
  background-color: #FEFEFE;
  overflow-x: hidden;
}
.spacer {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
h1 {
  font-size: 3rem;
  color: #000;
}
.section {
  height: auto;
  width: 100%;
  position: relative;
  padding: 0;
  overflow-x: hidden;
}
.portfolio {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
    background-color: #1F242D;
  overflow: hidden;
}
.portfolio_title {
    position: absolute;
    top: 0;
    left: -15rem;
    font-size: 24rem;
    letter-spacing: 0;
    -webkit-text-stroke-color: #343A42;
    display: inline-block;
}
.text-stroke {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #343A42;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  aling-content: center;
  justify-content: center;
  overflow: hidden;
}
.panel {
  display: flex;
  flex: 0 0 50%;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
    height: 100%;
  padding: 10rem 7rem 2rem 7rem;
  background-color: transparent;
  overflow: hidden;
}
.panel_item {
    height: 100%;
    width: 100%;
  margin: 0 auto;
}
.panel_img {
  width: 100%;
    height: 100%;
  margin: 0 auto;
}
.bg{
  background-color: red;
}
    <body>
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js?r=5426'></script>
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js'></script>
    <!-- partial:index.partial.html -->
    <div class="spacer">
        <h1>Scroll Down</h1>
    </div>

    <section class="section portfolio">
        <div class="panel">
            <div class="panel_item">
                <div class="panel_item_content">
                    <div class="panel_item_circle"></div>
                    <h1>Dedicated Web Development</h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
                </div>
            </div>
        </div>

        <div class="panel">
            <div class="panel_item">
                <div class="panel_item_content">
                    <div class="panel_item_circle"></div>
                    <h1>Dedicated Web Development</h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
                </div>
            </div>
        </div>

        <div class="panel">
            <div class="panel_item">
                <div class="panel_item_content">
                    <div class="panel_item_circle"></div>
                    <h1>Dedicated Web Development</h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
                </div>
            </div>
        </div>

        <div class="panel">
            <div class="panel_item">
                <div class="panel_item_content">
                    <div class="panel_item_circle"></div>
                    <h1>Dedicated Web Development</h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
                </div>
            </div>
        </div>

        <div class="panel">
            <div class="panel_item">
                <div class="panel_item_content">
                    <div class="panel_item_circle"></div>
                    <h1>Dedicated Web Development</h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
                </div>
            </div>
        </div>

        <div class="panel">
            <div class="panel_item">
                <div class="panel_item_content">
                    <div class="panel_item_circle"></div>
                    <h1>Dedicated Web Development</h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
                </div>
            </div>
        </div>

        <div class="panel">
            <div class="panel_item">
                <div class="panel_item_content">
                    <div class="panel_item_circle"></div>
                    <h1>Dedicated Web Development</h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
                </div>
            </div>
        </div>

        <div class="panel">
            <div class="panel_item">
                <div class="panel_item_content">
                    <div class="panel_item_circle"></div>
                    <h1>Dedicated Web Development</h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
                </div>
            </div>
        </div>
    </section>
    <div class="spacer">
        <h1>The End</h1>
    </div>
</body>