Jump to content
Search Community

ScrollTrigger + ScrollToPlugin Erratic Movement (React)

Nitro Interactive test
Moderator Tag

Recommended Posts

Hi,

 

Hopefully this ends up being a very simple question that does not require a Sandbox example (we're utilizing react).

 

We're a big fan of ScrollTrigger and ScrollToPlugin and we're combining the two.  We would like to do full-screen transitions much like fullPage.js.  It looks like we can achieve this very easily with ScrollToPlugin.  This is what we're referencing: https://codepen.io/GreenSock/pen/abdNxEJ

 

When we setup the exact same demo in React (with the exception of wrapping it with useEffect()), we do get the desired animation firing and ScrollTo moves from panel to panel ------ but, if we continue to use the mousewheel during the animation, or scroll too much initially, the viewport bounces up/down erratically -- our scrolling is conflicting/fighting with the scrollToPlugin animation.  This doesn't happen in the demo.

 

Ideally, each panel would act as the viewport was fixed while the animation is occurring; this is exactly how the demo behaves.

 

We set it up identical to the demo, with autoKill, same easing, etc.  We're also adding an empty input dependency within our useEffect so that it's not firing on every tick.

 

 

Could this be due to GSAP and/or ScrollToPlugin version?  We're looking at that possibility now.  The demo is absolutely identical except for the fact that it's in React and the ScrollTrigger is being created within useEffect.

 

Kind Regards

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

Link to comment
Share on other sites

  • Nitro Interactive changed the title to ScrollTrigger + ScrollToPlugin Erratic Movement (React)

In this demo it works perfectly as well.

 

If you scroll between sections 1 and 2 while continuing to rapidly scroll your mousewheel, the tween ScrollToPlugin handles, completes without the viewport jumping (this is the desired behavior): https://codesandbox.io/s/bold-margulis-yo9o5

 

This is the exact same setup used in our React Gatsby project which I cannot fully replicate on Codesandbox.

 

In our development build, if you keep scrolling while ScrollTo is animating between panels, it jumps because it allows you to move the scrollbar/viewport.  If you overscroll before ScrollToPlugin begins it's tween action, it also jumps before continuing to tween, any other movement will continue to allow the viewport to jump until the tween has finished.  In the above demo, it doesn't allow you to move away; it "jacks" the scrollbar.  It seems as ScrollToPlugin was designed to disallow scrolling while in progress, but for whatever reason that is being bypassed in our build.

 

It's definitely not a ScrollTo bug, but it is something that conflicts with the ScrollTo behavior.  We've literally stripped the project down completely so that it matches the above demo.  We even removed normalization and absolutely all styles unless Gatsby applies some of their own --- such as overflow settings (overscroll-behavior, etc.).

 

Do you guys offer "premium" paid support where you'd be willing to review a staging site?

 

Edit: I made the tween longer in the demo so you could see exactly what I was talking about --- it "jacks" the scrolling through the duration of the tween.

Link to comment
Share on other sites

I saw the video you sent. 

 

Can you verify that the scrollTo tween is working?

gsap.to(window, {
  scrollTo: { y: i * window.innerHeight + 1, autoKill: false },
  duration: 1.2,
  onUpdate() {
  	console.log("scrollTo", window.pageYOffset);
  }
});


I'm wondering if using the umd files might help. SSR frameworks seem to have problems with normal es modules.

import { gsap } from "gsap/dist/gsap";
import { ScrollToPlugin } from "gsap/dist/ScrollToPlugin";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

 

I would also try using useLayoutEffect instead of useEffect.

 

And any reason you are using this method instead ScrollTrigger's snap feature?

 

  • Like 1
Link to comment
Share on other sites

@OSUblake I really appreciate you taking the time to look at the demo/video and offer up some guidance.  Thank you.

 

I'm looking at these possible resolutions now ---- console logging the pageYOffset w/ScrollTo appears to show a big clue.  I'm seeing it fire every refresh cycle even though useEffect has an empty input value and should only be firing once.  I'll report back with my findings.

  • Like 1
Link to comment
Share on other sites

No real reason for using ScrollToPlugin over the ScrollTrigger snapping feature.  I saw a demo created by Zach that accomplished what we needed (snapping to full height containers while allowing ScrollTriggers/tweens in between), and went with it.  I can visualize how snapping could work; if I'm unable to resolve the issue, I'll definitely pursue that.

Link to comment
Share on other sites

@OSUblakeI switched to useLayoutEffect, ensured I was killing all tweens.  I had this already set but was also killing off ANY tweens attached to window.  I switched to UMD as well and still get the same behavior unfortunately.

 

I thought this was a hint, but maybe I'm wrong --- shouldn't this fire only once since we already know the destination; it shouldn't be updating as it's animating through the tween right?  I'm seeing this:

 

image.thumb.png.543dc97f4437bb642e08b9b055283fbe.png

 

If you're out of ideas, I'm definitely out of ideas.  I can switch to ScrollTrigger snapping; I think it will work.

Link to comment
Share on other sites

What ---- sorry for the multi post, but I just tracked down the issue after 10+ hours.  It's so unlikely that I don't get it yet, but I had a Canvas with a THREE.js starfield and when I comment out that canvas, ScrollToPlugin behaves correctly!  Does that make any sense at all?  The THREE.js scene is using useFrame.

 

It's only affecting Chrome as well --- in Firefox it works perfectly.  If I use UMD; it works in Chrome.  Wow.

  • Like 2
Link to comment
Share on other sites

1 hour ago, Nitro Interactive said:

Canvas with a THREE.js starfield and when I comment out that canvas, ScrollToPlugin behaves correctly!  Does that make any sense at all?  The THREE.js scene is using useFrame.

 

No clue unless useFrame is somehow messing with GSAP's request animation frame calls. 

 

1 hour ago, Nitro Interactive said:

If I use UMD; it works in Chrome. 

 

So using GSAP's UMD files is all that was needed to fix it?

 

Link to comment
Share on other sites

@OSUblake would you mind giving me a really brief run down on how I would use ScrollTrigger's pinning between containers?  I've used it for labels.

 

I thought I had the issue resolved, but it is extremely buggy.  It worked well in Firefox for a bit, then stopped --- it did the same in Chrome when disabling different things.  It was a huge mistake to go with a SSR framework w/GSAP, which is a shame because the site is animation intensive and we're too late in the game to switch to just React or Next.js.

 

Edit: Sorry, I sent this just as you were sending your reply.  I thought removing Canvas had resolved the issue.  I disabled/enabled it several times and tested each time; it was the deciding factor, but once I went back and rebuilt the site and tested again --- the issue returned.  I then removed everything again and tested with UMD and all of a sudden it worked again.  It's just extremely buggy.

Link to comment
Share on other sites

8 minutes ago, Nitro Interactive said:

It was a huge mistake to go with a SSR framework w/GSAP

 

It shouldn't be a problem, it's still the same code, just a different export type. Next.js has the same issues with having to use UMD files.

 

8 minutes ago, Nitro Interactive said:

how I would use ScrollTrigger's pinning between containers?

 

Have you checked out the demos page, there's probably something in there close to what you're doing.

https://greensock.com/st-demos/

 

Or if you're trying to do the fullpage.js type of thing, maybe something like this.

 

See the Pen PoWapLP by BrianCross (@BrianCross) on CodePen

 

 

Link to comment
Share on other sites

Thanks for the demo -- this is actually exactly how I started (not seeing the demo), but with having the containers fixed.  In my mind, this was the best method but there was some challenges with having each section also have scrollable parts with many of it's own ScrollTriggers.  I have some paths forward -- thank you again for your time!

 

I'm keen on fixing the method I have in place since it does ***almost*** work.  Something is obviously causing it to skip and seeing ScrollTo fire a over and over leads me to believe that's where the problem lies; a problem like this that is almost temperamental is extremely difficult to track down.

  • Like 1
Link to comment
Share on other sites

4 hours ago, Nitro Interactive said:

ScrollTo fire a over and over leads me to believe that's where the problem lies

 

This looks normal to me. It should log that out on every animation frame, and the value changes seem linear going from 223 to 0. If something was off, the values would probably be all over the place.

 

image.png

 

 

  • Like 1
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.
×
×
  • Create New...