dve46 Posted October 11, 2021 Share Posted October 11, 2021 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 More sharing options...
Solution OSUblake Posted October 11, 2021 Solution Share Posted October 11, 2021 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 3 1 Link to comment Share on other sites More sharing options...
dve46 Posted October 12, 2021 Author Share Posted October 12, 2021 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? Thanks! Link to comment Share on other sites More sharing options...
OSUblake Posted October 12, 2021 Share Posted October 12, 2021 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. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.addEventListener() https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.refresh() 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