2

I have two animations that I would like to group as one animation so that the easing will carry over and continue into the next animation. The second animation needs to start after the first one has finished. This is what I have so far, but the easing starts over when the second animation begins (which is what I would have expected).

$progressBar.animate({width: progressBarWidth + '%'}, barAnimationSpeed, 'swing', function(){
    $overGoalBar.animate({width: overGoalBarWidth + '%'}, barAnimationSpeed, 'swing', function(){});
});

Here's an example of how it works right now.

How can I group these animations into one easing animation?

Andrew
  • 227,796
  • 193
  • 515
  • 708
  • Have you tried not using a callback? – Ivan Sep 16 '11 at 16:57
  • What do you mean? I specifically need the second animation to start once the first has finished. – Andrew Sep 16 '11 at 16:59
  • Ah, I see what you mean now. I'm not having that problem in my JSFiddle: http://jsfiddle.net/dkBMA/1/ – Ivan Sep 16 '11 at 17:02
  • Your code should do this already. What exactly is happening? Are they starting together? – Ortiga Sep 16 '11 at 17:07
  • Actually, you are still having that problem. By slowing down the animation, you can see that the first animation eases out. I don't want the first animation to ease out, rather, I would like them to be continuous as if they were one animation: http://jsfiddle.net/misbehavens/dkBMA/2/ – Andrew Sep 16 '11 at 17:13
  • @Andrew: My browser is showing that the red one is easing to the %, then the blue one is easing to the %. No easing out occurs. – Ivan Sep 16 '11 at 17:15
  • I can almost fake it by giving the first animation an "easeIn" easing and the second one an "easeOut", but it's not as smooth as I would like it – Andrew Sep 16 '11 at 17:15
  • Here's a more accurate example of what I am working with. As you can see, the first animation almost stops since it eases out: http://jsfiddle.net/misbehavens/dkBMA/3/ – Andrew Sep 16 '11 at 17:17
  • @Andrew: I think you need to describe your problem in more detail. As is, the code is working exactly as I expect it to work. – Ivan Sep 16 '11 at 17:19
  • I don't think you will be able to share an easing between multiple elements. – Jose Faeti Sep 16 '11 at 17:25
  • 1
    I think you can simulate this by using jQuery Easing plugin, which enables more advanced easing effects: this way you can use In and Out effects achieving something like this http://jsfiddle.net/yW6jK/3/ – Jose Faeti Sep 16 '11 at 17:31
  • 1
    I think you are talking about the first one easing in and second one easing in with same acceleration as the first one had without losing acceleration. You are typing to implement two separate objects with one increasing line-looking but has different color in parts. – jwchang Sep 16 '11 at 17:32
  • @Jose I think the jQuery Easing plugin is now built into jQuery UI which I am also using, so I am already using some of those easing effects. I previously mentioned that I could fake it with "easeIn" and "easeOut" but it doesn't look as smooth when the percentages are not the same. For example, if the first bar is a larger percentage, it animates faster, it's more obvious that it's not one continuous transition. – Andrew Sep 16 '11 at 17:48
  • @Andrew what about writing your own custom ease effect? That way you could let one start or finish at a specified value (like the percentage in your case) and look smooth. – Jose Faeti Sep 16 '11 at 17:53
  • If that's what I need to do, I'll do it. How would I go about writing a custom easing effect? – Andrew Sep 16 '11 at 17:57

3 Answers3

0

If you want to demonstrate dynamically created percentage value of progress bar with easing effect.

I would use server created background Image

ex) Using GD Library in PHP

and set that image as background of one DIV tag in CSS.

#progressBar { background-img('Dynamically-created-image.jpg'); }

Lastly just animate that one DIV tag once.

If I have understood you correctly, this idea might work.

jwchang
  • 10,584
  • 15
  • 58
  • 89
  • Yeah, that might work, but then the server has to generate the background images, and it's much simpler to animate the width of the div than it is to generate custom background images for every progress bar. – Andrew Sep 16 '11 at 17:47
  • @Andrew Then you have to implement own easing effect function in jQuery or javascript that when the first one accelerates and ends, it should return its last acceleration without any decceleration and give that acceleration value to second one as starting acceleration parameter. – jwchang Sep 16 '11 at 17:52
0

Here is a great online tool for writing a custom easing function...

http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm

Also, here is more information in general about easing... you do not need the easing plugin if you have an easing function. From the links contained within, you can see a demo of each and then compare to the easing function behind it...

How can I add aceleration to this jQuery animation?

Community
  • 1
  • 1
Sparky
  • 98,165
  • 25
  • 199
  • 285
0

Have you tried using linear?

$('#progressBar').animate({width: 50 + '%'}, 2500, 'linear', function(){
    $('#overGoalBar').animate({width: 49 + '%'}, 2500, 'linear', function(){});
});

It's note exactly chaining two animations together, but it does smooth it out.

http://jsfiddle.net/dkBMA/11/

Steve Robbins
  • 13,672
  • 12
  • 76
  • 124