How to create an animation that moves smoothly similar to the GIF below?
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.Sign up to join this community
The animation itself was likely created in After Effects or some other animation tool. The key to the smoothness is the GIF frame delay time.
Most computer displays run at 60fps (frames per second), so the best frame rates for smooth animation are 60fps and 30fps, or even 15fps if the motion is slow and you’re trying to create the smallest file possible.
GIF animation timing is measured in hundredths of a second, and exact values corresponding to the frame rates we’re after aren’t possible. However, most web browsers happily animate GIFs in sync with the display, using rounded down frame delays. The values we’re after are 2/100ths for 60fps (0.02s in Photoshop), 3/100ths for 30fps (0.03s in Photoshop), and 6/100ths for 15fps (0.06s in Photoshop).
Most of the smooth GIFs you’ve seen use a 0.02s or 0.03s frame delay, and those are the values I typically use for mine as well.
I can't comment on spacer GIF's comment but as Marc Edwards says the GIF format specifies delay in 1/100s of a second as an integral value. Using 0.02s, 0.03s, or 0.06s for the delay is as close as it can be to standard frame rates of 60, 30, or 15 fps.