Jump to content
Search Community

Animation not smooth in Firefox

markmaurer test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello there,

 

after wasted hours of google searching, i will try to find help here:

 

I just started with GSAP and i absolutely love it. But there are two problems which only appear on firefox:

 

I'll post this link as well, because i dont think it's clearly visible in codepen:

http://markmaurer.de/tween/

 

Problem 1:

The animation is REALLY laggy and unsmooth in FF. It looks weird...

 

Problem 2 (not visible on codepen):

Text rendering, aliasing, smoothing or whatever changes after the animation is finished. Looks also weird?

 

Everything works smooth on this page: http://www.riiotlabs.com/... So it should be possible to do smooth animations on FF.

 

I've tried almost everything i could find in google but nothing worked. What am i doing wrong? :-(

 

Thank's a lot in advance for any help!

 

Kind regards

Mark

 

 

See the Pen BjbRdY by anon (@anon) on CodePen

Link to comment
Share on other sites

Hello markmaurer, and welcome to the GreenSock Forum!

 

For Firefox you would need to add a slight rotation:0.01 to your fromTo() tween. This should make Firefox translate your element smoother.

 

Your example forked (copied) and with slight rotation on both your fromTo() tweens:

 

See the Pen LGazGV by jonathan (@jonathan) on CodePen


 

$("div.wrapper > .current").find('.anim').each(function(index) {

	    TweenMax.fromTo($(this), 1, {
	      y: 50,	      
              rotation: 0.01, // add slight rotation
              opacity: 0
	    }, {
	      y: 0,
              rotation: 0.01 // add slight rotation
	      opacity: 1,
	      ease: Expo.easeOut,
	      delay: .2 + animCount * .1,
	      force3D: true
	    });

	    animCount++;

});

Another thing is that you are mixing GSAP and CSS transitions.

 

Keep in mind that i notice you are setting CSS transforms inside your stylesheet, but you are only including the regular transform function and not the other vendor prefix for webkit browsers.. -webkit-transform. That could be an issue in those webkit based browser since your not setting the initial transform for webkit.

 

If you use the GSAP set() method you can use GSAP to set your CSS transforms cross browser.

 

You can also try using autoAlpha instead of opacity which can help with performance. autoAlpha is part of the GSAP CSSPlugin:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

  • autoAlpha
    Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.
// Example of autoAlpha usage

//fade out and set visibility:hidden
TweenLite.to(element, 2, {autoAlpha:0});
 
//in 2 seconds, fade back in with visibility:visible
TweenLite.to(element, 2, {autoAlpha:1, delay:2});

Resources:

GSAP set() method: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

GSAP CSSPlugin: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

Let us know if you have anymore questions :)

  • Like 3
Link to comment
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.
×
×
  • Create New...