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

[steri]

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

 

[Carl]

Yes, I see the flicker in Safari. Great job on trying all tweaks we would probably suggest.

 

My gut tells me this has something to do with scrollmagic or perhaps those browsers being overwhelmed.

 

There is very little we can do to test any theories or experiment with your live site.

 

My suggestion would be to remove everything other than the image that is causing problems (and the related js code) and make a CodePen demo to submit to the ScrollMagic folks and here too.

 

We will take a look but I'm doubtful it's a GSAP issue.

[Jonathan]

@steri When i tested your site in IE11 and in Chrome on WIndows 7... I saw elements being animated really choppy with CSS position offsets like top, right and left. Which only animate on pixel level, unlike animating x (translateX) and y (translateY) which animate on a sub-pixel level for smooth creamy movement. CSS transforms like x and y will always animate better and smoother than CSS position offsets like top and left (or bottom and right).

 

Also i see a lot of elements with position fixed which will give a performance hit due to the re-layout it triggers before it has to paint when switching to position absolute. That is the nature of CSS position when it has a value of fixed, even if it is has its position fixed value changed to absolute.

 

I would recommend to make sure you are only using CSS position offsets like top, left, bottom, and right in your style-sheet for the initial position when the page loads. And then only animate x and y inside your tweens so your animations can be more smooth and use hardware acceleration (GPU).

 

But as Carl advised a simple reduced codepen that shows your issue would be better so we can see just the issue in a live editable environment,

 

 

[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!