HavasDK

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.

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

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

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

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

I know that type of solution, but it does not match up when you're running multiple timelines, like you suggested to set it up. Since the timeline is setup, on creation, the .call will not work properly. Here is a new way of setting up the banner, but still with some issues, which lays within GSDevTools i guess? After the first run, the last scene, which should only go to the "outro" label, will be executed much faster. And the timeline time will be changed to another time. Here is a new codepen. Do you think the GSDevTools is suitable for developing banners? I have tried 20 diffent ways now i think, but find it really hard to set up a proper template. Christian

Hey, None of the solutions fits, mabye the real question is: "Is it possible to run a timeline which repeats, but on the last repeat some of the timeline needs to be removed"? Christian

Hey, Thank you very much for your answer, but unfortunately this does not quiet solve my problem. This code looks very messy, and how would you scale this up to, lets say 100 scenes? - copy paste 4 lines 100 times? And there has to be an intro, which is only called on the first play, and an outro which is not called on the last play. Please say if my question unclear. I've found a "kind of" solution, which will be removing all the .from tweens, and use .set in the intro, and .to in the scenes. But thats a bit messy as well, and also add's multiple scene names to the GSDevTools. Christian

Hey guys, I've updated the question, with a codepen. Hope this is good enough, else let me know. This version i've uploaded is a new version, where i've tried setting it up with an intro, middle, end master_timeline .add(intro()) .add(setup_scenes(true).repeat(1)) .add(setup_scenes(false)) ; But still with no luck. - Christian

Hey guys, I'm creating a banner, which will play 3 times (loop 2), and use GSDevlTools. The bannerflow is like this: Intro, Scene 1, Scene 2, Scene 3, Outro Scene 1, Scene 2, Scene 3, Outro Scene 1, Scene 2, Scene 3 So after the first loop Intro should be removed, and the last loop should not play the Outro. My issue here is, that i cannot figure out a way to write the code, so it also works with GSDevTools. - the final timeline is not showing the correct length. I've tried with var master_timeline = new TimelineMax(); master_timeline .add(intro()) .add(scene1()) .add(scene2()) .add(scene3()) .add(outro()) .add(scene1()) .add(scene2()) .add(scene3()) .add(outro()) .add(scene1()) .add(scene2()) .add(scene3()) ; But that makes it very messy writing the scenes.. - i cannot use .from at all because, the it conflict with the scenes later on. Then i've tried with var master_timeline = new TimelineMax({repeat:2, onRepeat:check_replay}); master_timeline .add(intro(), "intro") .add(scene1(), "+=0.5") .add(scene2(), "+=0.5") .add(scene3(), "+=0.5") .add(outro(), "outro+=0.5") ; function repeat(){ master_timeline.remove("intro"); } Which does not remove the intro. Then i've tried var master_timeline = new TimelineMax({onComplete:repeat}); var loops = 0; var max_loops = 3; master_timeline .add(intro(), "intro") .add(scene1(), "+=0.5") .add(scene2(), "+=0.5") .add(scene3(), "+=0.5") .add(outro(), "outro+=0.5") ; function repeat(){ loops++; if(loops == 1){ master_timeline.remove("intro"); } else if(loops >= max_loops){ master_timeline.remove("outro"); } master_timeline.restart(); } Which it does not remove any of the labeled scenes, and the GSDevTools timeline, does not show the correct maxtime. I'm really out of solutions, so i would be very happy if any of you guys have a solution, or just a hint which can lead me in the correct way. Best regards Christian