steri

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!

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

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