Jump to content
Search Community

ScrollTrigger.scrollerProxy() fluidity issue

Michael31 test
Moderator Tag

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

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

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