Jump to content
Search Community

animation pausing unwanted

robwebb364 test
Moderator Tag

Go to solution Solved by robwebb364,

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

Have a sequence of overlaid images, am animating their opacity.


The animation is looped, but pauses mysteriously for three seconds or so at certain points.


Frustatingly the codepen does not recreate the issue - using coloured boxed only, it seems to proceed without pause.



Am using image files each 590 kb  (1024 x 768).

Please note - this is designed for use as a local site only.



Is this something to do with the browser cache? Am using Chrome on a Mac.


The overlay of CSS animation does slow it down, but removing it does not rid the pausing issue.


Alternatively, could it be that the CSS opacity is somehow reverting to the pre-animated state? Developer tools shows that the animation processing continues, during the pause in which it does not appear on screen.


thanks for all help


Link to comment
Share on other sites

Hello robwebb364, and Welcome to the GreenSock Forum!


The codepen you provided above was not working due to missing greater than sign (>) for your beginning divs.


Here is your same codpen but with the HTML fixed:

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


I am not seeing the pausing issue you describe in the codepen.  Is it possible something else in your code (JS or CSS) not included in the codepen is causing this.

  • Are you using the latest version of GSAP in your files outside of codepen?
  • What version of Chrome is this on Mac?
  • What Mac OS is this happening on?

I would recommend when testing locally or outside of codepen to comment out different parts of your code until you don't see the pauses you describe.


I tested on PC Windows 7 (64-bit) - Chrome Version 36.0.1985.143 m ... so if you are seeing this in Chrome on Mac .. then maybe someone else here can see if they see that behavior in Chrome on Mac. :)

  • Like 1
Link to comment
Share on other sites

BTW Im running Chrome Version 36.0.1985.125


on a MacBook Air 2011, OS 10.9.1


The same problem occurs in Firefox.




There is a secondary issue: the code on dropbox has a function to randomise the timing after each cycle, but this is not working.

Presumably I have to stop and restart the GSAP animation in order for the new time variable to have an impact - How do I do this?

Link to comment
Share on other sites

  • Solution

OK I think I have solved the first part of this.


As I am using 'yoyo' it is not necessary to put in the parts of the animation which take the opacity of each element in turn back to zero

- GSAP does that for me.


The code on dropbox is now modified and appears to work without pause.


thanks for commenting


[ im not sure the  time randomisation is working, will post separately]

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