Draggable image carousel horizontal scroll

[Rodrigo]

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!

[dogzzz]

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 

[GreenSock]

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. 

[dogzzz]

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 

[GreenSock]

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? 

[dogzzz]

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

 

 

[GreenSock]

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. 

[dogzzz]

sizing the images on drawing seems to help a bit