[animation gets very shaky and flickering in safari and firefox (mac) and IE11 (PC)]

Hi carl and jonathan,

thank you very much for your hints / tips!

 

For the moment i reduced transformation to y: "10%" and changed the effect itself - so seems to work now.

NevertheIess I will try to make a reduced CodePen demo by time.

 

And thanks for the performance tips - I wil give a try!

[animation gets very shaky and flickering in safari and firefox (mac) and IE11 (PC)]

Hi everyone,
im working on this site width scrollmagic:
http://project.at.w01203b5.kasserver.com/
username: greensock
password: greensock

 

in the middle there are 3 pictures with this animation:

new ScrollMagic.Scene({triggerElement: "#parallax_trigger_1", duration: 800})
.setTween("#parallax_1 > div.parallax_image", {y: "200%", ease: Linear.easeNone})
//.addIndicators()
.addTo(controller);

 

the problem is that the pictures / animation gets very shaky and flickering in safari and firefox (mac) and IE11 (PC) - other browsers like Firefox (PC), Chrome (mac + PC) seem to be ok

 

you can see it at the picture with the 2 people (woman and man) above headline "Strategisch. Innovativ. Umsetzbar. Erfolgreich. Überprüfbar." - you have to scroll

 

i tried all the css workarounds like

--moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

transform: scale(1.00001), translateZ(0.00001);
-webkit-transform: scale(1.00001), translateZ(0.00001);
-moz-transform: scale(1.00001), translateZ(0.00001);

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;

-webkit-filter: opacity(.9999);
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke: 0.35px;

 

but it doesn't work - i also tried

.setTween("#parallax_1 > div.parallax_image", {y: "200%",rotation:0.001, ease: Linear.easeNone})

but still flickering

 

any ideas how to fix that?

 

thanks for your help,

steri

 

[Jumpy / Choppy CSS Transform Animations]

Hi everyone,
im working on this site:
http://project.at.w01203b5.kasserver.com
username: greensock

password: greensock

 

in the middle there are 3 pictures  with this animation:

new ScrollMagic.Scene({triggerElement: "#parallax_trigger_1", duration: 800})
	.setTween("#parallax_1 > div.parallax_image", {y: "200%", ease: Linear.easeNone})
	//.addIndicators()
	.addTo(controller);

the problem is that the pictures / animation gets very shaky and flickering in safari only (all other browser are ok)

you can see it at the picture with the 2 people (woman and man) above headline "Strategisch. Innovativ. Umsetzbar. Erfolgreich. Überprüfbar." - you have to scroll

 

so it seems to be a safari bug

 

i tried all the css webkit workarounds like

-webkit-transform:translate3d(0,0,0);

-webkit-transform-style: preserve-3d;

-webkit-backface-visibility: hidden;

 

but it doesn't work - by the way chrome is fine - so its not about webkit I guess

 

any ideas how ti fix that?

thanks for your help,

steri