Jittery animation with slow moving animations

(Michelle Black) #1

I have several circles that slowly move in the background of a banner ad. The animation of the circles is very jittery. I noticed that when I speed up the animation it becomes smooth, but my boss wants the animation to be slow.

Does anyone have any suggestions for how I can make a smoother animation? Is there a way to increase the frame rate, or turn on anti-aliasing?

(elcalibano) #2

Post a link or a copy of the file. If somehow the project is top secret because it’s pre-release, I’d suggest making a new file, and on a timeline, recreate the same animation using the same technique you used, same easing, etc. (you can copy and paste with animations, and then copy and paste an animation bar from one object to another), test it to make sure the jittery effect is still there. Then zip up the file and upload it here. Then I, or someone else, can take a look and see if there’s any way to improve it while keeping it the same duration/speed.

(Michelle Black) #3

Thanks @elcalibano. I’ve uploaded the files. Any suggestions would be greatly appreciated!Background.zip (112.4 KB)

(elcalibano) #4

Hi, I took a look. I don’t have time this minute to make a perfect version of your exact animation, but I’d suggest using linear animation easing, as opposed to the “ease-in–out” default. But if you do want to use an ease timing, then I’d suggest ease out. But the other suggestion, is have them rotate, and no motion path or origin point change. I tried that out really quickly, and it looks like there’s no jitter if they’re rotating. You could group the entire bunch of circles, make the overflow hidden on that container, and then animate the rotation of the circles inside that group. The group itself would not move. Try that. I’ll see if I have time in the next 24 hrs. to play with it, to see if I can do a version that’s close to what you have. Unless you make one first. Post it if you do.

(Hans-Gerd Claßen) #5

increase the framerate by disabling 'positioning with csss’
also try disabling 'webkitacceleration’
timelineeasing to linear

(elcalibano) #6

Oh yeah, @h_classen is right, unchecking the box for Position with CSS left/top in the Document Inspector does make the motion smoother. I still think that based on what you have, making them rotate rather than position animation would make it pretty smooth. You could even have groups of circles rotating, animating the group in addition to, or instead of, individual circles.

(Michelle Black) #7

@h_classen and @elcalibano unselecting “Position with CSS” makes the animation considerably smoother. Thank you so much! I can’t express how much I appreciate your help on this. Thank you! Thank you! Thank you!!! :smiley:

(Michelle Black) #8

@h_classen I hope you don’t mind, I gave the solution to @elcalibano because he also provided instructions on how to find the box for “Position with CSS”