HELP - Works in firefox but not chrome

[SaintDominic138 0 Likes (Newbie)]

I'm trying to tween an animation controlled with scrolling. Looking for some help, it works fine in FireFox but not Google Chrome. Wondering if someone can help explain whats going on.

 

See the Pen gPRNQX by SaintDominic138 (@SaintDominic138) on CodePen

[Diaco 1,995 Likes (Superhero)]

Hi SaintDominic138 

 

pls check this out : 

See the Pen eJRqov by MAW (@MAW) on CodePen

[Shaun Gorneau 2,031 Likes (Superhero)]

It probably has to do with setting the right css property to 0. Here, I'm setting the x property in Javascript and then animating from there back to 0.

 

See the Pen qbjezo by sgorneau (@sgorneau) on CodePen

 

EDIT: And I've done it again ... sorry Diaco ... didn't see your post until I submitted.

[Jonathan 5,389 Likes (Superhero)]

As a rule of thumb you should never animate the CSS position offset properties.. top, bottom, right, or left

 

You should use x and y instead so you can trigger hardware acceleration and sub-pixel rendering.

 

So you can tween x instead of left for better performance and to get that GSAP buttery smoothness

 

See this article by GreenSock's Mighty Jack:

 

https://css-tricks.com/myth-busting-css-animations-vs-javascript/

 

And this other article:

 

http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

 

[SaintDominic138 0 Likes (Newbie)]

awesome!! thanks everybody!

[graphoeilmultimedia 2 Likes (Newbie)]

Hello, try :

 

$(window).scroll(function() {

var offset = $(this).scrollTop();

if( offset >= 100 ){

var tl = new TimelineLite;

tl.to(".red", 1, {left:00} );

}

});

 

Cordialy

Frederic