Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
HavasDK

Images go jittery, before animation

Recommended Posts

Hey,

 

I know this might be a bit hard question to answer, because its hard for me to explain it.

 

I have an background, with an image on top of it.

 

tl.to(background, 4, {y:-48, rotationZ:0.01, ease:Power2.easeOut}) ;
tl.to(image, 0.2, {scaleY:0.3, transformOrigin:"50%", rotationZ:0.01, yoyo:true, repeat:1, ease:Power4.easeInOut});

 

When doing the second animation (the image) the background is moving a pixel backwards, and the image itself, is doing a jittery move, (not the same in all formats).

 

My issue is that on my computer, phone, BrowserStack, other colleagues devices, and i cant reproduce it.

But on 1 (my PM's computer) and the clients computer, this jittery move happens (typical...).

- I've checked different browsers on the PM's computer, and tried with the exact same versions on my own + BrowserStack, no success.

 

I'm always using rotationZ when scaling/moving an object, and i've also tried with z and force3D.

 

I hope my question makes just a bit of sense, and that you guys have a tip to how i might be able to solve this,

or some information about why this happen, so i can tell the PM + client that "it happens on 0.001% devices"...

 

Should i put up a video of the case?

- since the jittery most likely wont happen for you guys either.

 

BR. Christian

 

 

Link to post
Share on other sites

Hm, that sounds odd. I have no idea what to tell you - did you make sure the browsers were updated? Perhaps it's a video card driver issue? 

Link to post
Share on other sites

Have anything to do with will-change perhaps? And then try without those small z movements? A video or CodePen would be helpful.

  • Like 1
Link to post
Share on other sites

Hey, thanks for the answers.

 

I've checked the browser version, which is the latest of chrome.

 

I dont think its the will-change issue, because its the same for all browsers on the computer.

- I've tried with both <img> and background-image.

 

How can it be a video card driver issue, and how to fix it/make sure it wont happen on other peoples computers?

The animation is used for a banner, which will be shown on millions of different computers.

 

- I'll try to post a video of what happens

 

BR. Christian

Link to post
Share on other sites

The eye is a layer on top of the giraffe

 

How it should look: Flawless, without noticing that its 2 images.

 

I dont know how to do this proberly, so i've uploaded 2 videoes to this wetransfser.

https://we.tl/gmHhiuMwg2

 

DONT_LOOK.mp4 = How it looks at the PM's computer (this shouldnt look like this)

Notice the eye does a small movement, when moving up.

 

LOOK_LIKE_THIS.mp4 = How it looks a my, and others computers (how it should look)

You dont noticing that the eye is different from the rest of the giraffe.

 

 

BR. Chris

Link to post
Share on other sites

Looks like it's snapping to a whole pixel at the end of the animation -- which was an issue with Chrome and how it rasterizes things.

Did you try adding will-change: transform to the css?

Link to post
Share on other sites

I agree with that it looks like snapping to a whole pixel, I've also tried with will-change: transform;

 

But this really freaks me out, since i cant reproduce it any way.

And i think I've tried any kind of hack, making the movement flawless

 

I dont understand how it can happen, since its the whole container moving, with 2 objects inside, which should always go same speed, and to the same whole pixels. All of it done on the GPU, with the rotationZ:0.01, z:0.01, will-change:transform, force3d:true..

 

Thank you for your time, and braincells, and that you can understand my issue :|

Link to post
Share on other sites

Wow!

 

I've found out now i guess.

On the Windows computers where the default Zoom i set to 125% this issue happens!

 

I've just set my own computer to 125% zoom, and i get the same view now.

 

I'm not sure if this is a problem for you anymore(?), but i'm going to investigate how many people might have the 125% zoom.

 

Link to post
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.

×