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?
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.
Thanks @elcalibano. I’ve uploaded the files. Any suggestions would be greatly appreciated!Background.zip (112.4 KB)
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.
increase the framerate by disabling 'positioning with csss’
also try disabling 'webkitacceleration’
timelineeasing to linear
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.
@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!!! 
@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”
I have the same issue with a simple image scale animation. Unchecked the Position with CSS but is still jittery. Attaching the source file. Any help would be appreciated. TIA300x250_WCU.hype.zip (291.6 KB)
Your animation is using the Size property to adjust the width and height, but if you want slow moving smooth animations you should instead use the Scale properties.
You can change the Scale by using Transform Mode – press command first before dragging the selection handle to grow/shrink the element. Alternatively, using the Scale section in the Metrics inspector (right below “Placement”) will have the same effect.
Under-the-hood, the Size property uses the CSS width and height values. These have to be at pixel boundaries, so slow animations appear jittery as they are on more of a stepping function and may not always align with top/left animations. The Scale property uses the CSS transform, which can be at fractional pixels. This means it will render interpolated and look much smoother.
(I’ve deleted your post on the other topic since this one covers it better)
That fixed it…Thank you Jonathan! That was driving me nuts.