Share Posted August 13, 2014 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 post Share on other sites
Share Posted August 13, 2014 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. 1 Link to post Share on other sites
Share Posted August 13, 2014 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. Link to post Share on other sites
Author Share Posted August 13, 2014 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 Link to post Share on other sites
Author Share Posted August 13, 2014 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 post Share on other sites
Share Posted August 13, 2014 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? Link to post Share on other sites
Share Posted August 13, 2014 Yes, on OSX 10.9.2. I see the animation pauses and a the div is black for a second. Link to post Share on other sites
Author Solution Share Posted August 13, 2014 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 post Share on other sites
