Jump to content


Animation and positioning corrupts when changing tab and back

Go to solution Solved by Carl,

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 experts.


I'm having trouble with some ads, I've recently created.

If you take a look at this, it looks ok at first glance: http://coop.nmd.dk/banners/placeholders/targetgroup2/300x250/targetgroup2_300x250.html


If you create a new browser tab, click it, wait a little while and change back again, the animated elements get, what seems to be undeterminate positions; most often outside the stage. It happens in IE, Firefox and Chrome; haven't tested on Mac. I don't see any particular pattern. Can you help me out?


Every 5th second, a timer runs this. The indexer is just an integer, which in this case switches between 0 and 1

function boingInd(indexer) {
            var i = "#image"+indexer;
            var j = "#outerUsp"+indexer;
            var k = "#calltoactionf"+indexer;
// Apply the original style to the objects, so that they are positioned as they should appear in the banner
            document.getElementById("image"+indexer).className = "image";
            document.getElementById("outerUsp"+indexer).className = "outerUsp";
            document.getElementById("calltoactionf"+indexer).className = "c2a";
// When this is done, animate them from outside the canvas area and to the positions, just assigned.
            TweenLite.from(i, 1, {delay:0.1, y:200, ease:Back.easeOut});
            TweenLite.from(j, 1, {delay:0.3, y:200, ease:Back.easeOut});
            TweenLite.from(k, 1, {delay:0.5, y:200, ease:Back.easeOut, onComplete:allowChange});

See the Pen 300x250 by banners (@banners) on CodePen

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums.


Very difficult to troubleshoot code that you have hosted on your site and out of our hands.


We strongly recommend that you create a reduced demo on CodePen as explained here: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/


It allows us to actually test our theories before presenting them to you.


I'm guessing though that when you need to take an additional step besides just re-setting the className before your tweens run again. You also probably need to remove any inline styles set by GSAP. Your css appears to set top and left positions, but you are telling GSAP to tween the x and y transforms (which result in setting a transform matrix in the inlines styles).


try adding

// Apply the original style to the objects, so that they are positioned as they should appear in the banner
            document.getElementById("image"+indexer).className = "image";
            document.getElementById("outerUsp"+indexer).className = "outerUsp";
            document.getElementById("calltoactionf"+indexer).className = "c2a";
// new

TweenLite.set([i, j, k], {clearProps:"all"});

Also, you mentioned you are using a timer to run that function every 5 seconds. I'm not sure what type of timer you are using but keep in mind that GSAP automatically throttles down to about 1fps when your browser tab loses focus. In order to keep your timers perfectly synched with your tween, I would strongly recommend using TweenLite.delayedCall() instead.

TweenLite.delayedCall(5, whateverFunctionShouldRunAfter5seconds)

My guess is that your 5-second timer is firing at a time when the tweens have not completed and your from() tweens are getting created with incorrect ending values. 


If you still have problems, please provide a CodePen or JSFiddle demo so that we can tinker with the code. Thanks.

  • Like 3
Link to comment
Share on other sites

Hello Carl.


Yes, that's it - I implemented the set-line as you suggested. I've been testing the ads for the last 15 minutes and cannot get them to fail anymore.

Regarding the timer; I use a standard JS setInterval - but I'll make sure to have the delayed call in mind, next time.


Thank you for your swift assistance.

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.