Jump to content
Search Community

ThreeJS planes copying images with ScrollTrigger

studiogram test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

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

  • Solution

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

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