Jump to content

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

Jerkiness on Progress Bar with intra timeline Image Transitions

Recommended Posts



While this problem is much diminished in this codepen, it is still present if you look closely. It doesn't happen all the time , but when it does , there is a slight stop and then the progress bar begins again while the images transition to another. This is not present in the states with only one image (the progress bar goes across with no slight interruptions). I am working on a much bigger banner slider (20 states with 7 or 8 that have these multiple intra-transitions). It is present to a greater degree. I am trying to figure out how to get rid of it. Any ideas?





See the Pen NNepeW by jstafford (@jstafford) on CodePen

Link to comment
Share on other sites

I didn't notice any problems, but it sounds like just a rendering issue that is unrelated to GSAP. Remember, the more pixels you change on the screen, the harder you push the browser's graphics rendering routines (thus CPU/GPU load). If you're only changing opacity, it should be pretty fast though. I'm curious why you're using an onUpdate to change the scaleX of the progress bar rather than simply tweening that value directly. That'd certainly be more efficient, but I doubt this is the source of your "jerkiness" problems anyway. 

  • Like 3
Link to comment
Share on other sites

Hi Jack.


You can see slight hiccups in between slides if you look closely at the progress bar. It is present to a greater degree on my local example that I can't put on codepen. No reason why I am using onUpdate. I was using this as an example. http://greensock.com/forums/topic/10484-get-progress-of-a-child-timeline-and-master-timeline/ ; Could this be the source of the problem? Trying to figure out how to tie the scaleX progress with progress bar when I create the timeline and not having much luck.

Link to comment
Share on other sites

For the progress bar, just set it's duration to the duration of the timeline and use a linear ease. And you don't need to use display:none with autoAlpha as it will automatically change its visibility property.

See the Pen Vaqdjq?editors=0010 by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

And also keep in mind that a long, slow moving animation like the progress bar is doing may appear choppy because it has the potential to stay at certain pixel/subpixel value for a couple of frames if the change in value isn't great enough. You're brain will notice the difference, and it won't appear smooth.

  • Like 1
Link to comment
Share on other sites



Right now your progress bar is attached to your main timeline, instead of the individual image slides timelines. That is why it doesn't reach 100% for each slide transition. So right now it just reaches 100% when all images have been cycled through which is not the behavior an image slider .


The following is just an example of using a progress bar in a simple GSAP image slider:


See the Pen qxsfc by jonathan (@jonathan) on CodePen


It will just animate the progress bar to 100% for each slide.


Right now it is just using matrix(), so it is just a 2D transform. You could add force3D:true or add a slight rotation: 0.01 or z:0.01 if you want to trigger hardware acceleration. This way you can have it animate using matrix3d() instead of what it is doing now using just matrix(). Then it could get more smooth since it will use the GPU.



  • Like 3
Link to comment
Share on other sites

o.k. - looks like everyone is giving some great answers so I'll throw my 2 cents worth out here too. :)


I was curious about all the timelines being created for this effect. You could actually make this whole thing happen with a couple staggers and a tween for the progress bar.

var slideTime = 1.5,
    stayTime = 5,
    tl = new TimelineMax();

tl.staggerTo(".imgSlide", slideTime, {autoAlpha:1},stayTime+slideTime)
  .staggerTo(".imgSlide", slideTime, {autoAlpha:0},stayTime+slideTime,stayTime+slideTime);
TweenMax.from(".progress", tl.duration(), {transformOrigin:"left", scaleX:0, ease:Linear.easeNone})

See the Pen pyqVBy by PointC (@PointC) on CodePen


Hopefully that helps a bit.


Happy tweening.


  • Like 2
Link to comment
Share on other sites

thanks guys. let me digest these answers and reply later. 

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.