How to make this swipe section effect with Scrolltrigger, need help

[cx20012002]

Hi Team, 

here is the link that is showing the scrolling effect of swiping sections

Olson Kundig — A collaborative global design practice whose work expands the context of built and natural landscapes.

 

I have checked all the demos listed on GreenSock website,  this is different from cover layer sections on the demo of your website, it's

a bit more like the comparison section, but with multiple sections, could I please get a help on how to code this effect?

[elegantseagulls]

It might be worth looking at this demo from the GreenSock website: https://greensock.com/docs/v3/Plugins/Observer - This one is implemented using Observer, but the same principles can be applied using standard ScrollTrigger.

[Rodrigo]

Hi @cx20012002 and welcome to the GreenSock forums!

 

Just a side note to improve your experience in the forums. There is no need to create duplicate threads or post a question in other threads after creating one. We do our best to answer users within 24 hours. With that in mind I deleted a comment you posted in another thread in order to keep everyone's focus just on this thread which will make it easier to track it.

 

To complement Ryan's suggestion you could also use clip path in order to achieve the same effect. Here is a simple example:

See the Pen eYjoOEW by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!

[cx20012002]

Thanks heaps for the quick response, this is a great example, but when i try to add more sections it just did not look right, could you please show a bit more based on this code with more sections?

 

 

[Rodrigo]

Hi,

 

Super simple, just create a timeline with the ScrollTrigger configuration in that. Loop through all the images and then add an instance for every image except the first one:

const images = gsap.utils.toArray(".image");

const imagesTl = gsap.timeline({
  defaults: {
    ease: "none"
  },
  scrollTrigger: {
    trigger: ".container",
    pin: true,
    start: "top top",
    end: `+=${images.length * 100}%`,
    markers: true,
    scrub: true
  }
});

images.forEach((image, i) => {
  if (i) {
    imagesTl.to(image, {
      clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)"
    });
  }
});

I updated the codepen example:

See the Pen eYjoOEW by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[cx20012002]

Thanks very much for the quick response!!! you save my life, this is exactly what i want.