Jump to content
GreenSock

sarahholden

GSAP Observer + Scroll Trigger

Recommended Posts

Hello,

 

I'm attempting to recreate an effect from this codepen: 

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

 

My issue is that the section I want to add animations to on swipe is not at the top of the page, but further down. Is it possible to get this same functionality, but to have scrollable content above the section that uses Observer? I've attached a Codepen example - my issue is that when there is scrollable content above this section, it blows right past the section and gets weird. 

 

Designers I work with always want sections in the middle of the page where animations are tied to mouse events. For example, one swipe switches a panel or animates in text. 😅 I was hoping with observer there would be a cleaner way to do this.

 

Thanks in advance, really appreciate all your work answering forum questions. I don't often ask but I benefit from questions from others :)

 

Sarah

See the Pen RwyQeyG by sarahholden (@sarahholden) on CodePen

Edited by sarahholden
Clarify now that I can see where codepen examples get placed in post
Link to comment
Share on other sites

Oh! One other note is that I'm also using ScrollSmoother on my site, so I can't just use fixed positioning for that section or something along those lines. 

 

Thanks :)

Link to comment
Share on other sites

Hi Sarah,

 

This solves a few issues:

// handle the panel swipe animations
function gotoPanel(index, isScrollingDown) {
  animating = true;
  // 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();
    animating = false;
    return;
  }

  //   target the second panel, last panel?
  let target = isScrollingDown ? swipePanels[index] : swipePanels[currentIndex];

  gsap.to(target, {
    xPercent: isScrollingDown ? 0 : 100,
    duration: 0.75,
    onComplete: () => {
      animating = false;
    }
  });
  currentIndex = index;
}

// pin swipe section and initiate observer
ScrollTrigger.create({
  trigger: ".swipe-section",
  pin: true,
  anticipatePin: true,
  start: "top top",
  end: "+=50%",
  onEnter: (self) => {
    intentObserver.enable();
    gotoPanel(currentIndex + 1, true);
  },
  onEnterBack: (self) => {
    intentObserver.enable();
    gotoPanel(currentIndex - 1, false);
  }
});

It adds some space to prevent the scroll event to move past the start/end points It's not perfect but hopefully is good enough for now.

 

We'll look into it and keep you posted on what we find about it.

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Welcome to the forums, @sarahholden! Congrats on stepping out and posting your first question (after lurking for a while). 💚

 

From what I can tell, the browser doesn't really honor the request to event.preventDefault() on wheel events when scrolling is in-progress, at least on some devices like my Mac. Very annoying, and I'd argue wildly incorrect behavior, but don't worry - we can work around it: 

 

let preventScroll = ScrollTrigger.observe({
			preventDefault: true,
			type: "wheel,scroll",
			allowClicks: true,
			onEnable: self => self.savedScroll = self.scrollY(), // save the scroll position
			onChangeY: self => self.scrollY(self.savedScroll)    // refuse to scroll
		});
preventScroll.disable();

Basically, we have to save the scroll position and revert it every time it tries to change. 

 

Here's the revised demo: 

See the Pen MWGVJYL?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

  • Like 4
Link to comment
Share on other sites

Wow, really appreciate the quick responses @Rodrigo and @GreenSock

 

This solution works perfectly for what I need.  :) 

 

Since I am using ScrollSmoother this morning I had experimented with pausing scroll smoother when that section is reached and then unpausing when the slides have ended, but I'm new to ScrollSmoother so I wasn't sure what unintended consequences that would have. 

 

Your solution seems much more foolproof. Really appreciate your help on this one, Observer is such a nice tool to have! I should be set with this solution now!

 

  • Like 2
Link to comment
Share on other sites

4 minutes ago, sarahholden said:

Since I am using ScrollSmoother this morning I had experimented with pausing scroll smoother when that section is reached and then unpausing when the slides have ended, but I'm new to ScrollSmoother so I wasn't sure what unintended consequences that would have. 

Ssshhh...don't tell anyone but that solution I listed above is basically pulled directly from the guts of ScrollSmoother's pause() method :)

 

If you're getting any odd behavior doing it through ScrollSmoother, let us know but it's totally fine to just use what I provided above. There's no NEED to go through ScrollSmoother that I can think of.

 

Enjoy! 

  • Like 1
Link to comment
Share on other sites

Oh - perfect! That's so funny I happened to stumble on that. It was working but I wasn't sure if that was how it was supposed to be used - helpful to know behind the scenes what it does. 

 

Thanks again!

 

 

 

 

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.
×