ThreeJS planes copying images with ScrollTrigger

[alguna 1 Likes (Newbie)]

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

[OSUblake 18,399 Likes (Superhero)]

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

 

 

[alguna 1 Likes (Newbie)]

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 🤷‍♂️

 

[OSUblake 18,399 Likes (Superhero)]

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

 

[alguna 1 Likes (Newbie)]

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 

[OSUblake 18,399 Likes (Superhero)]

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.

 

 

 

 

 

 

[alguna 1 Likes (Newbie)]

Thanks a lot,

 

Here is an updated codepen including the smooth scroll : 

See the Pen zYzZoJr by alguna (@alguna) on CodePen