Michael31 Posted February 22, 2021 Share Posted February 22, 2021 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 More sharing options...
ZachSaucier Posted February 22, 2021 Share Posted February 22, 2021 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 More sharing options...
Michael31 Posted February 22, 2021 Author Share Posted February 22, 2021 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 More sharing options...
ZachSaucier Posted February 22, 2021 Share Posted February 22, 2021 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 More sharing options...
Michael31 Posted February 24, 2021 Author Share Posted February 24, 2021 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 More sharing options...
ZachSaucier Posted February 24, 2021 Share Posted February 24, 2021 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. 1 Link to comment Share on other sites More sharing options...
Michael31 Posted February 25, 2021 Author Share Posted February 25, 2021 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 👍 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now