CODEWITHSUNDEEP
javascriptcssscrollgsap
Reem
Reem

Reputation: 11

How to go over the container in a scroll using ScrollTrigger by GSAP

In this Codepen, https://codepen.io/redbluepurple/pen/wvZzqQX, I am trying to achieve an effect similar to https://koalastudios.ca/projects (without the animation) where the images when scrolled left, go above the the title. But in my implementation, the images stay in the container and wont move above the title.

gsap.utils.toArray(".slideText").forEach(text => {
  gsap.timeline({
    defaults: {ease: "none"},
    scrollTrigger: {
      scroller: text.closest(".horizSlider"),
      horizontal: true,
      trigger: text.closest(".slide"),
      start: "left right",
      end: "left left",
      scrub: true
    }
  })
  .fromTo(text, {x: 250}, {x: -250}, 0)
  .from(text.nextElementSibling, {scale: 0.8}, 0)
});

your.main{
  display:grid;
  grid-template-columns: 1fr 1fr;
}
.horizSlider {
  position: relative;
  white-space: nowrap;
  overflow: auto;
}
.horizSlider .slide {
  display: inline-block;
  position: relative;
}
.slideImage {
  transform-origin: bottom left;
}

<section class="main">
<h1 class="header-section">Scroll the slider to the right to see some parallax effects</h1>

<section class="horizSlider">
  <div class="slide">
    <img width="1000" height="500" class="slideImage" src="" alt="Filler image">
  </div>
  
  <div class="slide">
    <img width="1000" height="500" class="slideImage" src="" alt="Filler image">
  </div>
  
  <div class="slide">
    <img width="1000" height="500" class="slideImage" src="">
  </div>
  
  <div class="slide">
    <img width="1000" height="500" class="slideImage" src="">
  </div>
  
  <div class="slide">
    <img width="1000" height="500" class="slideImage" src="">
  </div>
</section>
</section>



<header>
   <a href="https://greensock.com/scrolltrigger">
     <img class="greensock-icon" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/scroll-trigger-logo-light.svg" width="200" height="64" />
  </a> 
</header>

I tried to replicate the effect using CSS and JavaScript without using a library but that didn't work. For example, I tired to set the position of the image container to absolute, but them it would take the whole width even the titles. I tried to use an event listener to hear for the scroll and then set a margin left but that didn't work also. The original effect is made using this library react/three drei, but it is for react and my project is made in vanilla JavaScript.

Upvotes: 1

Views: 258

Answers (0)

Related Questions