Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Michael31

ScrollTrigger.scrollerProxy() fluidity issue

Recommended Posts

Hi,

I made my own smooth scroll which basically changes the transform:translateY value of my element.

I wanted to plug it with ScrollTrigger so I used the ScrollTrigger.scrollerProxy() function.

 

Eventually, my animation is connected to my smooth scroll.

Unfortunately, as you can see on my CodePen bellow, the animation made with ScrollTrigger is not smooth at all. 

I event tried to call the ScrollTrigger.update method to fix this but it doesn't change anything.

 

Does anyone see what I'm missing ?

Thanks a lot !

See the Pen WNoZLPM by michaelgrc (@michaelgrc) on CodePen

Link to comment
Share on other sites

Hey Michael. What's the point in making your own smooth scrolling? It will save you a good bit of time to use an existing one :) 

 

If you are going to build one, I highly recommend looking at the source code of an existing one(s) to see how they are setting things up. It's not as simple as translating one element around to my knowledge.

Link to comment
Share on other sites

Hey @ZachSaucier,

thanks for your answer.

 

Actually I already made it. I made my own smooth scroll with all the classic features for a smooth scroll for example .init(), .destroy(), .resize()...

The idea is to only use gsap on my project. I was thinking that if I simply provide the current transformation to my scrollerProxy() method everything should work great. But yeah studying code from existing smooth scrolls looks like a great idea :)

 

 

Link to comment
Share on other sites

In that case, some suggestions based on the code that you shared:

  • Usually the target of the scrollerProxy is an element within the body that is used as the base of the smooth scrolling.
  • Usually you should declare the scroller for each ScrollTrigger (perhaps using ScrollTrigger.defaults()). 
Link to comment
Share on other sites

Hey @ZachSaucier,

I added the changes you suggested but my issue is still here.

 

Here's a video of the behavior of my scrollTrigger element (I simply applied it to my image): https://www.dropbox.com/s/0fpux9z4kgci4uw/Enregistrement de l’écran 2021-02-24 à 12.24.48.mov?dl=0

As you can see, it's not an FPS issue, plus my smooth scroll is still fluid.

Maybe my ScrollTrigger.update method is not called on every frame ?

I tried to call ScrollTrigger.update on my requestAnimationFrame() function to be sure it's called on each frame, but it didn't solve my issue.

 

Do you have any other lead ?

Thank you very much

Link to comment
Share on other sites

Sorry, I'd argue this type of help is really out of scope of what we're able to provide for free in these forums. If you're interested in premium consulting we do offer that in some circumstances. Send us a message if you're interested.

  • Like 1
Link to comment
Share on other sites

Hey @ZachSaucier, thanks for the answer.

For your information I finally managed to fix my issue : I had to add the parenthesis on the ScrollTrigger.update() call.

Everything works great now 👍

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

×