Jump to content
Search Community

Images go jittery, before animation

HavasDK test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 comment
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 comment
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 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...