Trail Artifacts of animated shapes

1

Having an issue I never encountered before. When I create this animation using 2 circles and a square I get these peculiar trail marks. Little white etches. When it animates in a browser they are seemingly random during the loop. Example here https://www.dropbox.com/s/su7brxsb67wcqkf/motion.mp4?dl=0

2

Hi Jon!

I am not seeing the little white etches. Tested in Safari, FireFox & Chrome no issues. Opera does not have the white etches, but it never plays the animation cleanly, even after repeated plays.

EDIT: re: Opera - by playing cleanly I mean a smooth animation. Opera had a momentary pause in the same location on 5 plays - right where the square tucks up into the merging circles.

3

A couple things you can try:

  • If you have borders on the elements, turn them off. Browsers tend to suck at drawing elements with borders.
  • Uncheck “Use WebKit graphics acceleration” in the Document Inspector.
4

I think I figured it out. The on circle was not true to its size. I believe it was sized down in a group and then extracted from that group. The pixel count on the circle was way off. It’s said like 130 by 130 when it was closer to 330 by 330. Once I recreated the on circle the issue seemed to go away.

Thanks for the help

2 Likes