dve46

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!

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!