Rodrigo Posted October 13, 2022 Share Posted October 13, 2022 Hi, Honestly I couldn't tell you about that, most likely they have some optimization script running somewhere but in my screen 1920x1080 this doesn't look too different from he images you're using in your codepen in terms of quality: https://www.polestar.com/www-images/home-car-carousel/car-sequence/desktop/ps6-precept-ps3-my23ps2-ps1/000.jpg Unfortunately this is beyond the scope of what we do around here as we must focus our efforts in GSAP related issues and this is mostly related to image quality and setup. Perhaps another user knows better ways to prep images, I normally use TinyPNG for optimizing my images. I know there are some Node packages that can automatize that task with large amounts of images, but that has never been a situation I've been on. If you have any GSAP related questions, please let us know. Happy Tweening! Link to comment Share on other sites More sharing options...
dogzzz Posted November 14, 2022 Author Share Posted November 14, 2022 Hi there, I've done a comparison video to show, the quality is noticeably different, I was wondering if anyone knew why or how to improve the quality? I like the way gsap draggable animates between the images but I need them to be higher quality. Not sure why the other package makes them so crisp and this one doesn't. The images are much larger than the canvas size so the images themselves aren't the problem. Thank you Untitled (2).mp4 Link to comment Share on other sites More sharing options...
GreenSock Posted November 14, 2022 Share Posted November 14, 2022 If you've got a simple CodePen for the GSAP one and the same thing using a different tool that illustrates a quality difference, we'd LOVE to look at that. I cannot imagine this has anything to do with GSAP. But without a minimal demo, it's almost impossible to discern. Link to comment Share on other sites More sharing options...
dogzzz Posted November 16, 2022 Author Share Posted November 16, 2022 Thanks ok so - if you compare the GSAP one See the Pen wvXrWJr by zrrrrr (@zrrrrr) on CodePen with the other package See the Pen JjvxMbv by zrrrrr (@zrrrrr) on CodePen the difference is huge Thank you Link to comment Share on other sites More sharing options...
GreenSock Posted November 16, 2022 Share Posted November 16, 2022 I'm having a very difficult time noticing a difference in rendering quality. I've attached a screenshot. Are you saying that those two images look radically different to you? There are obvious logic issues in your GSAP version in terms of interactivity, but I assume you're just asking about image quality here, right? Link to comment Share on other sites More sharing options...
dogzzz Posted November 16, 2022 Author Share Posted November 16, 2022 Yeah if you look at this one its massive - it seems to render the placeholder fine but once you start scrolling its an issue - the gsap one is all pixelated versus the other one is crisp On the logic issues ideally I'd like when you scroll that it doesn't go back to the first frame but it goes on from wherever you are but thats a separate issue yes! Thank you Link to comment Share on other sites More sharing options...
GreenSock Posted November 16, 2022 Share Posted November 16, 2022 Sorry, I can't reproduce the pixelated behavior like that and I'm confident this has absolutely nothing to do with GSAP. Perhaps try: context.imageSmoothingEnabled = true; context.imageSmoothingQuality = "high"; context.translate(0.5, 0.5); It seems like an issue with the way you're rendering on the canvas. You may want to try using an off-screen canvas to reduce the image to half: // off-screen canvas: let osc = document.createElement('canvas'), osctx = osc.getContext('2d'); osc.width = img.width / 2; osc.height = img.height / 2; osctx.drawImage(img, 0, 0, osc.width, osc.height); // drawing images reducing to half again and repeating it context.drawImage(osc, 0, 0, osc.width / 2, osc.height / 2); We really try to keep these forums focused on GSAP-specific questions (please read the forum guidelines), but let us know if/when you find the problem. 1 Link to comment Share on other sites More sharing options...
dogzzz Posted December 2, 2022 Author Share Posted December 2, 2022 sizing the images on drawing seems to help a bit 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