Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
alguna

ThreeJS planes copying images with ScrollTrigger

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

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

 

 

  • Like 1
  • Thanks 1
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

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

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) :

 

delay.jpg.cf150a215b56c0f308b2b766d4276916.jpg

 

I'm really lost with this, not really sure how I can make it more bulletproof :-S 

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

Thanks a lot,

 

Here is an updated codepen including the smooth scroll : 

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

  • Like 1
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.

×