Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
amit95

Parallax effect within pinned GSAP container + change scroll speed

Recommended Posts

I have a block which becomes pinned and scrolls horizontally.

 

Within this block, I have a vector which has a width of 3573px.

 

When a user scrolls, I want the vector to scroll also, alongside the images in my demo.

 

Have tried moving my vector under .horizontalScroller__scroll, so that it scrolls alongside the images, but that didn't work.

 

In addition to this, I'm looking for a way to slow down the slider. If a user slingshots the scrollbar up, they miss the first few items in the pinned container.

 

See visual below:

 

ezgif-6-9ceea9b06e.gif.436789d779ae2c5e2cb4cdb2dec03a7d.gif

 

In the above:

 

  • When you scroll down fast, it's already started scrolling and the first image is outside view already (which is expected behaviour). But is there a way to slow it down so that the first slide is always visible, no matter scroll speed.
  • When you scroll up fast, it doesn't showcase the first few slides.

 

See approach:

 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<section class="spacer"></section>

<section class="horizontalScroller">

  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-md-8">
        <div class="horizontalScroller__intro text-center">
          <h2 class="horizontalScroller__header">Header</h2>
        </div>
      </div>
    </div>
  </div>

  <div class="horizontalScroller__scroll">
    <div class="horizontalScroller__images" id="horizontal-scroll">
      <div class="horizontalScroller__item">
        <div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div>
      </div>
      <div class="horizontalScroller__item">
        <div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div>
      </div>
      <div class="horizontalScroller__item">
        <div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div>
      </div>
      <div class="horizontalScroller__item">
        <div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div>
      </div>
    </div>

  </div>

  <div class="horizontalScroller__pattern">
    <div class="horizontalScroller__pattern-inner">
      <svg class="horizontalScroller__pattern-svg" xmlns="http://www.w3.org/2000/svg" width="3573.448" height="935.115" viewBox="0 0 3573.448 935.115">
        <g id="Journey_line" data-name="Journey line" transform="translate(58.751 66.918)">
          <path id="Path_111603" data-name="Path 111603" d="M-57.191,807.764c141.061,46.335,271.1-48.506,208.8-171.343-44.647-88.041-84.385,2.223-76.906,70.2,11.034,100.3,75.906,190.808,216.669,143.778C406.3,812,470.169,700.216,568.892,676.505c94.985-22.813,137.722,77.422,240.409,77.422,189.877,0,202.929-186.737,384.8-145.215,70.851,16.176,119.356,96.77,315.333,91.709,108.733-2.808,183.293-179.6,324.1-222.009,136.412-41.091,145.842,55.306,290.03,55.078,221.015-.348,232.464-251.918,446.846-265.314,144.5-9.029,229.247,90.469,364.966-54.532,26.116-27.9,52.772-44.257,77.079-53.559,38.931-14.9,81.644-13.148,119.848,3.795,52.233,23.165,142.179,57.218,225.578-44.538C3456.26-.7,3510.921-63.64,3510.921-63.64" fill="none" stroke="rgba(249,247,250,0.3)" stroke-miterlimit="10" stroke-width="10" />
          <path class="pulse" id="Path_111604" data-name="Path 111604" d="M1922.219,474.558a33.6,33.6,0,1,1-33.6-33.6,33.6,33.6,0,0,1,33.6,33.6" fill="#5d209f" />
          <path class="pulse" id="Path_111605" data-name="Path 111605" d="M1908.09,474.558a19.475,19.475,0,1,1-19.476-19.476,19.476,19.476,0,0,1,19.476,19.476" fill="#f6eb61" />
          <path class="pulse" id="Path_111606" data-name="Path 111606" d="M1056.355,649.037c0-19.115-15.045-34.611-33.6-34.611s-33.6,15.5-33.6,34.611,15.045,34.611,33.6,34.611,33.6-15.5,33.6-34.611" fill="#5d209f" />
          <path class="pulse" id="Path_111607" data-name="Path 111607" d="M1042.226,649.037c0-11.078-8.719-20.059-19.476-20.059s-19.475,8.981-19.475,20.059,8.719,20.059,19.475,20.059,19.476-8.981,19.476-20.059" fill="#f277c6" />
          <path class="pulse" id="Path_111610" data-name="Path 111610" d="M623.423,672.044c0-18.834-15.045-34.1-33.6-34.1s-33.6,15.268-33.6,34.1,15.045,34.1,33.6,34.1,33.6-15.268,33.6-34.1" fill="#5d209f" />
          <path class="pulse" id="Path_111611" data-name="Path 111611" d="M609.294,672.044a19.478,19.478,0,1,0-19.476,19.764,19.621,19.621,0,0,0,19.476-19.764" fill="#ff6d6a" />
          <path class="pulse" id="Path_111608" data-name="Path 111608" d="M2355.151,439.3a33.6,33.6,0,1,0-33.6,33.6,33.6,33.6,0,0,0,33.6-33.6" fill="#5d209f" />
          <path class="pulse" id="Path_111609" data-name="Path 111609" d="M2341.022,439.3a19.475,19.475,0,1,0-19.476,19.476,19.476,19.476,0,0,0,19.476-19.476" fill="#ff6d6a" />
        </g>
      </svg>

    </div>
  </div>

</section>

<section class="spacer"></section>
.spacer {
  height: 100vh;
  background: lightblue;
}

.horizontalScroller {
  padding: 100px 0 60px 0;
  background-color: #5D209F;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.horizontalScroller__intro {
  margin-bottom: 25px;
}
.horizontalScroller__scroll {
  height: 70%;
  position: relative;
  overflow: hidden;
}
.horizontalScroller__images {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}
.horizontalScroller__item {
  width: 50vw;
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
}
.horizontalScroller__image {
  -o-object-fit: fill;
  object-fit: fill;
  margin: 0 auto;
  width: 260px;
  height: 255px;
}
.horizontalScroller__pattern {
  position: absolute;
  top: -50%;
  width: 100%;
  height: 100%;
}
.horizontalScroller__pattern-inner {
  height: 100%;
}
$(function() {

  let images = gsap.utils.toArray(".horizontalScroller__item");

  gsap.to(images, {
    xPercent: -100 * (images.length - 1),
    ease: "none",
    scrollTrigger: {
      trigger: ".horizontalScroller",
      pin: true,
      scrub: 1,
      end: "+=3600", // size of svg bg
      //end: () => "+=" + document.querySelector(".horizontalScroller__images").offsetWidth
    }
  });

});

 

Link to comment
Share on other sites

Hi there @Amit,

 

could you pop this in a minimal demo so we can tweak your code and see the approach. 

 

Thanks very much!

 

Link to comment
Share on other sites

Quote

In addition to this, I'm looking for a way to slow down the slider. If a user slingshots the scrollbar up, they miss the first few items in the pinned container.

 

You can achieve this by moving the end trigger further down the page so the user has to scroll more to complete the animation.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×