Jump to content
Search Community

Image Janking & Blur on Scale and Zoom effects

kevywalton test
Moderator Tag

Recommended Posts

Hey,

 

I cannot upload a Code Pen as I don't have Pro and the images being used are part of a current work campaign (HTML5 Creative banner Ads). However, I can post my GSAP3 code. I am consistently having the same issue with images that are zoomed or scaled, whereby Chrome is often 'pretty' good but Firefox & IE are very janky and often blur too. I cannot add the Force3D to the tween as it breaks Safari!! And it doesn't make much noticeable difference in other browsers either. I have added some browser specific CSS rules, such as, `image-rendering: high-quality;` and `will-change: scale;` to assist here but with minimal benefit. This kind of high res image scale and zoom is used a lot in our work but GSAP seems to struggle with its consistency?? Any ideas???
Thanking you all in advance...

 

Kev..

var tl = gsap.timeline({
repeat: 2,
repeatDelay: 5
});
 
tl
.fromTo(image1, { x: -30 }, { autoAlpha: 1, x: 0, duration: 1.5 }, '+=0.1')
.addLabel('textStart', 0.35)
.fromTo(textBg, { x: -170 }, { x: 0, duration: 1, ease: "sine.inOut" }, 'textStart')
.fromTo(copy1, { x: -170 }, { x: 0, duration: 0.8, ease: "sine.inOut" }, 'textStart+=0.2')
.to(copy1, { autoAlpha: 1, duration: 0.5 }, 'textStart+=0.5')
.fromTo(image1, { scale: 1, rotationZ: "0.01" }, { scale: 1.07, duration: 2.3, ease: "expoScale(1, 1.07)", transformOrigin: "50% 50%" })
.to(copy2, { duration: 0.65, autoAlpha: 1 }, '-=1.75')
.addLabel('finish', 4.25)
.fromTo([wipeTop, wipeBtm], { x: -170 }, { duration: 0.45, x: 0, stagger: 0.05, ease: "sine.inOut" }, 'finish-=0.1')
.to(logoWhite, { autoAlpha: 0 }, 'finish+=0.1')
.to(logoBlue, { autoAlpha: 1 }, 'finish+=0.1')
.fromTo(copy3, { x: - 30 }, { duration: 0.4, x: 0, autoAlpha: 1, ease: "sine.inOut" }, 'finish+=0.2')
.fromTo(cta, { x: -30 }, { autoAlpha: 1, x: 0, duration: 0.65, ease: "sine.inOut" }, 'finish+=0.5');
 
 
Link to comment
Share on other sites

Hey Kevy and welcome to the GreenSock forums.

 

2 hours ago, kevywalton said:

will-change: scale;

This is invalid. You should try using will-change: transform instead.

Don't scale to a value above 1. That's probably why your images are blurry.

2 hours ago, kevywalton said:

image-rendering: high-quality;

This will likely cause it to be more slow.

 

Why don't you use stand-in assets for showing us in your demo?

  • Like 1
Link to comment
Share on other sites

@ZachSaucier Thanks for getting back to me. Unfortunately, I don't have a Pro account in CodePen so cannot upload ANY assets (images, etc,.). Let's says that the blur of the image is not too bad. The real problem part is that the animation (scaling / zooming) effect is shaky, janking on some browsers, particularly on Firefox and IE.. I tried to attach a screengrab video of the creative but its too large to be uploaded here. Sorry for all the messing!!

 

Edited by kevywalton
more details..
Link to comment
Share on other sites

  • 4 months later...

@ZachSaucier or any other members... So the issue with the zoom / scale and janking ( blurring of images ) is still happening. I have it pretty smooth on Chrome and Safari but Firefox is just "poor"!!! I have made a basic Codepen:

See the Pen xxOZKGp by hermeticpoet (@hermeticpoet) on CodePen

which you can test in chrome and see the scale effect run well but in Firefox it is janky. This example is actually "not that bad" compared with the high res images used in my actual banners. There are also some other animations with text and stuff running at the same time in the real banners. 

 I have tried to smooth this out using all sorts of `image-rendering` CSS rules on the image element and included `will-change: transform;` too. I shall screen shot all those rules I have attempted to correct the issue with, however, I have obviously tried each of them separately and in conjunction with one another in a multitude of combinations but to no avail!! 

 

Any suggestions here would be most appreciated folks  😇 😊


image-rendering-css-rules.png

Link to comment
Share on other sites

This is due to browser rendering, not anything wrong in GSAP. As such, we can't promise that we can find a fix. Sorry! Maybe someone dropping by here will spend their time finding a solution for you, if there is one.

 

Side note: In general you should avoid scaling things above a scale of 1 if you can help it. It's probably be better to size the image larger and then scale from a value less than 1. 

  • Like 1
Link to comment
Share on other sites

Yep, like Zach said it's totally a browser thing. Some browser try to do "pixel snapping" to be helpful...yet it's completely unhelpful in situations like this. 

 

If I changed your rotation from 0.01 to 0.1, it seemed to help significantly in Firefox. Basically, you need to get it rotated enough to force Firefox to knock it off with the pixel-snapping "helpfulness".  A skewX or skewY can help too if you don't want to do rotation. 

 

Good luck!

  • Like 2
Link to comment
Share on other sites

15 hours ago, GreenSock said:

Yep, like Zach said it's totally a browser thing. Some browser try to do "pixel snapping" to be helpful...yet it's completely unhelpful in situations like this. 

 

If I changed your rotation from 0.01 to 0.1, it seemed to help significantly in Firefox. Basically, you need to get it rotated enough to force Firefox to knock it off with the pixel-snapping "helpfulness".  A skewX or skewY can help too if you don't want to do rotation. 

 

Good luck!

 changing the rotationZ from 0.01 to 0.1 and then removing the `image-rendering: -moz-crisp-edges;` has significantly improved its performance in Firefox. Thanks for your assistance here Jack and Zach..

Link to comment
Share on other sites

  • 4 months later...

It seems I'm getting the "pixel snapping" issue on Firefox.  I've been trying the rotation trick but it's not perfect.

Also I was looking at this and it's seems perfect on Firefox: https://codepen.io/GreenSock/pen/VQQPNG

Any idea why that would be different over there?

  • Like 1
Link to comment
Share on other sites

58 minutes ago, MichaelMP said:

It seems I'm getting the "pixel snapping" issue on Firefox.  I've been trying the rotation trick but it's not perfect.

Also I was looking at this and it's seems perfect on Firefox:

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

Any idea why that would be different over there?

That's actually the easing scale that I use. It still caused issues with a number of browsers for me but the rotationZ and Z positioning definitely improved the quality across browsers. I've haven't done so here but it can also improve quality if the image you use is only scaled up to 100%.

Here's the exact single tween I used in one of my Ads:
 

.fromTo('#image1', { scale: 1 }, { scale: 1.07, duration: 3.5, ease: "expoScale(1, 1.07)", transformOrigin: "50% 50%", z: 0.1, rotationZ: "0.01" }, '<')
 
Link to comment
Share on other sites

10 hours ago, MichaelMP said:

Thanks for the feedback.

The ExpoScaleEase sample is a mystery as it works fine without any tricks like rotating (it seems).

You're saying the ExpoScaleEase demo works well, right? But your animation doesn't? Got a minimal demo we can see? The easing has absolutely nothing to do with pixel snapping, FYI. 

Link to comment
Share on other sites

Sorry my reply was confusing. What I wanted to highlight it that the demo which shows the ExpoScaleEase next to the Linear Easing is working fine (both easing) so it has nothing to do with the easing per say. What I don't understand is how both animations within that demo are looking perfect on Firefox while there are no tricks with the rotation. I've reproduce the exact same code but locally pixel snapping on firefox is showing (with or without any easing regardless). Could that be around the way the iframe renders it within Codepen?

Link to comment
Share on other sites

1 hour ago, MichaelMP said:

Sorry my reply was confusing. What I wanted to highlight it that the demo which shows the ExpoScaleEase next to the Linear Easing is working fine (both easing) so it has nothing to do with the easing per say. What I don't understand is how both animations within that demo are looking perfect on Firefox while there are no tricks with the rotation. I've reproduce the exact same code but locally pixel snapping on firefox is showing (with or without any easing regardless). Could that be around the way the iframe renders it within Codepen?

Agh ok. I get what you mean now but unfortunately its too good a question because I don't know how it works properly in Firefox in that example? 

Link to comment
Share on other sites

3 hours ago, MichaelMP said:

Sorry my reply was confusing. What I wanted to highlight it that the demo which shows the ExpoScaleEase next to the Linear Easing is working fine (both easing) so it has nothing to do with the easing per say. What I don't understand is how both animations within that demo are looking perfect on Firefox while there are no tricks with the rotation. I've reproduce the exact same code but locally pixel snapping on firefox is showing (with or without any easing regardless). Could that be around the way the iframe renders it within Codepen?

It's pretty tough to diagnose blind - can you please provide a minimal demo that reproduces the issue clearly? We'd be happy to take a peek. 

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.
×
×
  • Create New...