SaintDominic138

HELP - Works in firefox but not chrome

Recommended Posts

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.

 

http://codepen.io/sgorneau/pen/qbjezo

 

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

  • Like 2

Share this post


Link to post
Share on other sites

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/

 

:)

  • Like 3

Share this post


Link to post
Share on other sites

Hello, try :

 

$(window).scroll(function() {
var offset = $(this).scrollTop();
if( offset >= 100 ){
var tl = new TimelineLite;
tl.to(".red", 1, {left:00} );
}
});
 
Cordialy
Frederic

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.