Jump to content
Search Community

Square animation lag only in firefox {Help}

mv_1024 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,

 

I am a huge greensock fan and thanks for putting this JS package together! I have always used it in AS, so I am very unfamiliar with how to help my current issue. I created a jsfiddle here: http://jsfiddle.net/jq5JW/5/

My code seems to be working pretty well in IE, Chrome and Safari, but a lot of lag shows on FF (29.0.1)... I attempted to force 3d and translate on z but that did not seem to impact the lag much. I am open to any solutions and I appreciate any replies.

 

I basically just animating a bunch of squares on a bezier curve. I dont do a lot of js so please excuse any blatant problems with my code structure! Any help is surely appreciated.

 

Thanks a ton!

T

Link to comment
Share on other sites

Hello mv_1024, and welcom to the GreenSock Forum!

 

I modified your example, just making some slight changes: http://jsfiddle.net/jq5JW/16/

 

Full page view in jsfiddle:  http://jsfiddle.net/jq5JW/16/embedded/result/

  • I gave your #container the CSS property positon:relative to make sure that your absolutely positioned div's are absolutly positioned relative to its parent. (very important)
  • I wrapped a jQuery ready() event around your buildGrid() function to make sure the DOM was ready before trying to build the squares. You could also wrap a window load event to make sure the DOM is ready and the winodw is loaded before animating any elements.
  • I also swapped out setTimeout() for GSAP delayedCall()

After that i saw that Firefox was not lagging after intial start.

 

I tested on: PC Windows 7 (64-bit) - Firefox 29.01

 

Does this help?

  • Like 1
Link to comment
Share on other sites

Hello!

 

I am reading your post now but running the new fiddle you posted and it still runs very lagged for me. I am on Windows 8... Thanks a ton for helping me with this. :) Your changes made a lot of sense but still didnt seem to impact the lag on my end. Do you have any other ideas?

 

Thanks again

T

Link to comment
Share on other sites

Ok, I will have to test on a Windows 8 machine.. I am on Windows 7 PC and I see no lag.. but in the meantime I have some questions:

  • Is this Windows 8.1?
  • Are you seeing this in Metro view or Desktop view on Windows 8?
  • Have you tested with Firefox - with all Addons Disabled to make sure it's not a addon with a memory leak?
  • Have you tested starting Windows 8 in Safe Mode with Networking, and see if it is lags in safemode?
  • Are you viewing in Multiple monitors with extended desktop? .. some bug reports about windows 8 being laggy when using multiple displays.
  • Do you have AERO effect or skin enabled? If so try to disabled and see if it still lags.
  • Have you tried viewing your example in FULL page view on jsfiddle to make sure nothing in jsfiddle is causing any lag when viewed through jsfiddle? .. here is my above modified jsfiddle link in full mode view: http://jsfiddle.net/jq5JW/16/embedded/result/

It doesnt look like a GSAP bug, but more likely the amount of DOM elements your trying to render at once.. and for some reason Windows 8, Firefox is causing the lag? But see if any of the above helps, and/or if you can post back answers to the above questions which can help narrow down what might be causing the lag your seeing in Windows 8!

  • Like 2
Link to comment
Share on other sites

Well, it seems as though it was running poorly in the edit mode on jsfiddle, but now on its own its awesome. I actually changed my duration to 1 so there are less items animating at any given time. Thanks for all of your help! I learned a lot from you and I sincerely appreciate it. If every place had support like this then the world would be a different place. :) 

  • Like 2
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...