[ScrollTrigger animations triggered in fixed sections with fade in and out]

Hi @Rodrigo

Thank you, it was helpful.

Thanks,

Farhan

[ScrollTrigger animations triggered in fixed sections with fade in and out]

Hi @Rodrigo

Please review the codepen below:

See the Pen pomowor by tyckxpby-the-selector (@tyckxpby-the-selector) on CodePen

Here's I've added the following code:


So, when you hover the first section it's working fine as you can see below:



But when I hover the next sections (SWIPE SECTION 2 and SWIPE SECTION 3), it doesn't work due to z-index. Could you please take a look?

Thanks

[ScrollTrigger animations triggered in fixed sections with fade in and out]

Hi @Rodrigo

I'm facing an issue where I can't hover/click on the next elements due to z-index as the previous elements comes on the top of the other elements, please see below:

Here's my updated code:

 

  document.addEventListener('DOMContentLoaded', function () {

    let allowScroll = true; // sometimes we want to ignore scroll-related stuff, like when an Observer-based section is transitioning.
    let scrollTimeout = gsap.delayedCall(0.8, () => allowScroll = true).pause(); // controls how long we should wait after an Observer-based animation is initiated before we allow another scroll-related action
    let currentIndex = 0;
    let swipePanels = gsap.utils.toArray(".swipe-section .panel");
    
    // set z-index levels for the swipe panels
    gsap.set(swipePanels, { zIndex: i => swipePanels.length - i})
    
    // create an observer and disable it to start
    let intentObserver = ScrollTrigger.observe({
      type: "wheel,touch",
      onUp: () => allowScroll && gotoPanel(currentIndex - 1, false),
      onDown: () => allowScroll && gotoPanel(currentIndex + 1, true),
      tolerance: 10,
      preventDefault: true,
      onEnable(self) {
        allowScroll = false;
        scrollTimeout.restart(true);
        // when enabling, we should save the scroll position and freeze it. This fixes momentum-scroll on Macs, for example.
        let savedScroll = self.scrollY();
        self._restoreScroll = () => self.scrollY(savedScroll); // if the native scroll repositions, force it back to where it should be
        document.addEventListener("scroll", self._restoreScroll, {passive: false});
      },
      onDisable: self => document.removeEventListener("scroll", self._restoreScroll)
    });
    intentObserver.disable();
    
    // handle the panel swipe animations
    function gotoPanel(index, isScrollingDown) {
      // return to normal scroll if we're at the end or back up to the start
      if ((index === swipePanels.length && isScrollingDown) || (index === -1 && !isScrollingDown)) {
        intentObserver.disable(); // resume native scroll
        return;
      }
      allowScroll = false;
      scrollTimeout.restart(true);
    
      let currentPanel = swipePanels[currentIndex];
      let targetPanel = swipePanels[index];
    
      gsap.set(currentPanel, { opacity: 1 }); // Reset opacity of current panel
      gsap.set(targetPanel, { opacity: 0 }); // Set opacity of target panel to 0, so it fades in
    
      gsap.to(currentPanel, { opacity: 0, duration: 0.75 });
      gsap.to(targetPanel, { opacity: 1, duration: 0.75 });
      
      currentIndex = index;
    }
    
    ScrollTrigger.create({
      trigger: ".swipe-section",
      pin: true,
      start: "top top",
      end: "+=100", // just needs to be enough to not risk vibration where a user's fast-scroll shoots way past the end
      onEnter: (self) => {
        if (intentObserver.isEnabled) { return } // in case the native scroll jumped past the end and then we force it back to where it should be.
        self.scroll(self.start + 1); // jump to just one pixel past the start of this section so we can hold there.
        intentObserver.enable(); // STOP native scrolling
      },
      onEnterBack: (self) => {
        if (intentObserver.isEnabled) { return } // in case the native scroll jumped backward past the start and then we force it back to where it should be.
        self.scroll(self.end - 1); // jump to one pixel before the end of this section so we can hold there.
        intentObserver.enable(); // STOP native scrolling
      }
    });
  });

Please advise.

Thanks so much

[ScrollTrigger animations triggered in fixed sections with fade in and out]

@Rodrigo Thank you for clarifying. I'll take a look into this further. Thanks again!

[ScrollTrigger animations triggered in fixed sections with fade in and out]

@Rodrigo also, if we could add fade in/out effect for the swiper section instead of scroll that would be excellent?

Thank you!

[ScrollTrigger animations triggered in fixed sections with fade in and out]

Hi @Rodrigo

Thanks so much! this is very close. One thing I'm noticing is that I've to scroll multiple times to change the slides between the sections. For example when the swiper section starts I've to scroll 3 or 4 times to go to the next section. Could you please let me know what needs to be done here?

Thank you

[ScrollTrigger animations triggered in fixed sections with fade in and out]

Hi @Rodrigo

Thank you for providing me with the example. I've already seen this. However, what I'm looking for is a scroll effect that triggers when I reach a specific section containing multiple inner sections. The entire section should fill the screen, and then each inner section should scroll individually with a single swipe or mouse wheel movement. Once I reach the last inner section, it should start normally scrolling the rest of the next sections again. I hope you get my point.

Thank you

[ScrollTrigger animations triggered in fixed sections with fade in and out]

Can we have it section by section scroll with fade effect on a single swipe/mouse wheel? Currently when I try to swipe it, it doesn't change the slide immediately, please see the attached.

Thanks,
Farhan