animation pausing unwanted

[robwebb364]

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

 

[Jonathan]

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.

[jamiejefferson]

As you mention, I'm not seeing any pause in the codepen. I did notice you had some invalid HTML there which I've corrected here 

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

 

We would be glad to help if we could reproduce what you describe, but unfortunately we just can't see it.

[robwebb364]

thanks for comments

 

a full test file with images is at :

https://dl.dropboxusercontent.com/u/70207338/tweenmax%20pause%20issue/grove%20park%20leaves%20tweenmax.html

 

this shows the pause, after about 10 seconds, lasting for about 4 seconds.

 

the css file is this:

https://dl.dropboxusercontent.com/u/70207338/tweenmax%20pause%20issue/stylemult%20grove2.css

 

and the Greensock JS files:

https://dl.dropboxusercontent.com/u/70207338/tweenmax%20pause%20issue/TimelineMax.min.js

https://dl.dropboxusercontent.com/u/70207338/tweenmax%20pause%20issue/TweenMax.min.js

[robwebb364]

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?

[Jonathan]

Thank you robwebb364 for the link to the main animation outside of codepen.

 

When i view this on Windows 7  .. i don't see the pause in Chrome 36 or Firefox 31 ..

 

Anyone seeing the pause in Chrome or Firefox on Mac?

[Chrysto]

Yes, on OSX 10.9.2. I see the animation pauses and a the div is black for a second. 

[robwebb364]

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]