Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
robwebb364

animation pausing unwanted

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 post
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 post
Share on other sites

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

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

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

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

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

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.

×