Jump to content
Search Community

Animation lagging sometimes

nofpowells test
Moderator Tag

Go to solution Solved by Jonathan,

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

Hi nofpowerlls, can you be more specific what and when is freezing (which browser/OS etc.)?


One think I would suggest if you want to get the best performance is to use absolute position in your CSS.


See the Pen bf5232f100eb5505cacb8fce5450a189 by ihatetomatoes (@ihatetomatoes) on CodePen


You can also create a single timeline and include all you tweens on it, instead of using delays for all your tweens.


This GreenSock TimelineLite Tutorial explains how to use GSAP timelines:


Hope that helps.




  • Like 2
Link to comment
Share on other sites

In Code Pen is more fluid, but on my page using(firefox/chrome) on windows and smartphone not totally fluid.

OBS: In chrome is more fluid than Firefox, on windows, but on mobile both browser freezing during animation.

I will modify with TimeLine. Thanks!

Sorry for my english!

Link to comment
Share on other sites

If you manage to isolate the issue into a reduced CodePen demo, I am sure we can point out what is wrong with your code.


At the moment it looks like too many plugins are affecting the layout of your page and it could be any of the other plugins causing the issue.


Try the delay as you suggested, but I doubt it will help.


Sorry I couldn't be more helpful.


And you English is perfect, no need to apologize :)

  • Like 1
Link to comment
Share on other sites

  • Solution

This doesn't look like a GSAP issue.


It looks like you need to only run your code when the DOM is ready and the window has loaded.

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {

    // wait until window is loaded - meaning all images, style-sheets, and assets
    window.onload = function() {

         // animation code goes here


This way you only run your animation code when the DOM is fully ready and all images, style-sheets, links, and assets are loaded. Then you woudlnt need to add a delay.

  • Like 1
Link to comment
Share on other sites



It shouldn't be too complicated. All you need is detect the user agent for the most common devices or you can use a service like Wurfl in order to detect the user's device.


Then, when you have that, you can store a boolean in a global variable (hopefully global for your app's scope and not the global namespace).


Finally you can set up all your animation code inside an init function, and depending on the boolean value you can execute it or not.

var isMobile = bool;// here goes the detection code

function initAnimations(){
  var tl1 = new TimelineLite();
  var tl2 = new TimelineLite();
  var tl3 = new TimelineLite();

  // and so forth all your code here
  // Also using node and browserify, or Grunt, or Gulp you can create smaller
  // animation modules and use CLI to put them all together


// finally depending on the boolean call the function

Another alternative is create different animations. For that I use an approach that is a bit more complex. I create a master object that holds all the configuration objects for the tweens and depending on how the boolean comes back use one set of configurations or the other. Another alternative is to create the config objects in two separate functions(like the code above but create two functions, one for devices and one for desktops).

var isMobile = bool;

var configObj = {

  "desktop" : {
    "tween1" : {x:100, y:100},
    "tween2" : {rotation:180, autoAlpha:0}

  "devices" : {
    "tween1" : {x:10, y:10},
    "tween2" : {autoAlpha:0}


// then create your tweens
var tween1 = TweenLite.to(el, 1, isMobile ? configObj.devices.tween1 : configObj.devices.tween1);
var tween2 = TweenLite.to(el, 1, isMobile ? configObj.devices.tween2 : configObj.devices.tween2);

Finally you can create separate JS files and use a resource loader to load one file or the other. In this approach (my favorite for this cases) using node makes your life quite simple:

// devices file (devices.js)
var t = TweenLite.to(el, 1, {x:100, y:100, rotation: 360});
module.exports.devices = t;

// desktop file (desktop.js)
var t = TweenLite.to(el, 1, {x:10, y:10});
module.exports.desktop = t;

// this goes in your start file
var isMobile = bool,

  tweens = require('./devices');
} else {
  tweens = require('./desktop');

// now you can use your tweens
  • Like 5
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...