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