Share Posted September 8, 2021 Hi, I'm trying to replicate images as planes in a background canvas, but I'm facing some issues due to the request animation frame delay (I've set images opacity to half to see the difference and the lag between both worlds). I've also tried to put my main element as a fixed one to make it scroll also with ScrollTrigger, but this didn't change anything. Does anyone have already face this problem ? Regards, See the Pen rNwWVJW by alguna (@alguna) on CodePen Link to comment Share on other sites More sharing options...
Share Posted September 8, 2021 Hi Alguna! I think you would need to call render for each of your triggers. Perhaps something like this. See the Pen YzQNxMp by GreenSock (@GreenSock) on CodePen 1 1 Link to comment Share on other sites More sharing options...
Author Share Posted September 8, 2021 Woowww @OSUblake, Thanks a lot, it indeed does the trick! edit : @OSUblake it is weird, when I look at it within the small codepen window, it works, but opening it in another window it doesnt, and I still have the same problem with some delay between scroll image and image within canvas .. When resizing the window, sometimes it works, but not always, so I think it is going closer to the solution, but I don't understand what is missing 🤷♂️ Link to comment Share on other sites More sharing options...
Share Posted September 8, 2021 Hi @alguna We don't get notifications if you edit a post. It's best to just create a new post if you have something to add. See if this one is better. It's using the beta version of ScrollTrigger. See the Pen JjJEmvE by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Author Share Posted September 9, 2021 Hello @OSUblake, OK, good to know for editing post Well, it remains the same, depending on browser width, there is a delay like I reported in my codepen (see screenshot attached on Chrome) : I'm really lost with this, not really sure how I can make it more bulletproof :-S Link to comment Share on other sites More sharing options...
Solution Solution Share Posted September 9, 2021 Strange. I'm not seeing that with the updated version. Did you clear your cache? Things can be difficult to sync because the browser handles scrolling on a different thread. Another option might be to do the scrolling yourself, like how a smooth scroller works, which will make it easier to sync because JavaScript will be able to control when the updates happen. Link to comment Share on other sites More sharing options...
Author Share Posted September 9, 2021 Thanks a lot, Here is an updated codepen including the smooth scroll : See the Pen zYzZoJr by alguna (@alguna) on CodePen 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