Push followers with setPin

[muhmushtaha]

Hi, I want to do this effect Section Wipes but I can't manage to do it, I tried to add pushFollowers to setPin method but it didn't work.

When I add this option all the sections interfere with each other.

Any suggestions?

[jonkwheeler]

Unsure how to help without you posting code. However, something maybe to start with viewing the source code on that page.

Something like this could work using ScrollScene. I am disabling the built-in global controller, and setting it only once, and modifying it.

const slides = document.querySelectorAll("section.panel");
let myController = null;

// create scene for every slide
for (var i = 0; i < slides.length; i++) {
  const myScene = new ScrollScene({
    triggerElement: slides[i],
    useGlobalController: false,
  });

  if (!myController) {
    myController = myScene.Controller;
  }

  myController.setPin(slides[i], { pushFollowers: false });
}

myController({
  globalSceneOptions: {
    triggerHook: "onLeave",
    duration: "200%", // this works just fine with duration 0 as well
    // However with large numbers (>20) of pinned sections display errors can occur so every section should be unpinned once it's covered by the next section.
    // Normally 100% would work for this, but here 200% is used, as Panel 3 is shown for more than 100% of scrollheight due to the pause.
  },
});