Jump to content

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

Using three.js with ScrollTrigger Pinning introduces scaling problem on window resize

Go to solution Solved by OSUblake,

Recommended Posts

Hello GreenSock Forum!

First of all I want to thank you for GSAP, it's an awesome project and I've been very pleased using it!


So what I want to do is add a Three.js animation to the middle of a page which is controlled/animated by a ScrollTrigger. In order to see the animation all the time, I want to pin the canvas until the animation is done. For this I set 'pin' to true in the ScrollTrigger settings. This works really well if you just load the page and use it straight away. But if I want to resize the three.js canvas whenever the browser window size is changed it stretches and everything starts to behave weirdly. Looking at the inspector I can see that my canvas is nested inside of a pin-spacer div and it has fixed height and width applied on element level. That prevents the canvas from properly scaling and since there is an Aspect Ratio mismatch between the canvas and the three.js output, the image becomes stretched. That's my guess at least.


So I was wondering if someone could help me here. Is this a bug or am I just using ScrollTrigger Pinning the wrong way? Any help would be appreciated!

See the Pen VwzYvNa by dv46 (@dv46) on CodePen

Link to comment
Share on other sites

  • Solution

Welcome to the forums @dve46


I would put a wrapper element around the canvas and use that instead since the inline styling that GSAP is apply for the pinning is not going to match the attributes that three.js sets.


See the Pen NWvPryv by GreenSock (@GreenSock) on CodePen


  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Ok wow, thanks so much @OSUblake!

I just put a simple wrapper around the canvas in my original code and it just works! I can't believe the solution was this simple! Thanks so much for helping!

Now I saw that you also added a GSAP Ticker and an Event Listener on the ScrollTrigger. Would you mind explaining what these do?


Link to comment
Share on other sites

22 minutes ago, dve46 said:

Now I saw that you also added a GSAP Ticker


If you're using GSAP, there's already a request animation frame (rAF) loop running, i.e. gsap.ticker, so there's no point in creating an additional rAF loop. And if you run your own rAF loop, there's a small possibility that it might not be in sync with GSAP. It could a frame behind or ahead.


ScrollTrigger listeners will be synced with when ScrollTrigger refreshes, like on a window resize. ScrollTrigger automatically debounces resizes so you don't have to write your own timeout calls.


More information about the listeners can be found here.




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