Photoshop: Why my gif animation is not smooth

Question

I have a simple line which should be smoothly loaded step by step (like a loading bar), but instead it just fades in. I use Photoshop CC. For that I create first and last layers and then automate it with Tween tool

See here what I get : https://gyazo.com/05aa2693608e88ec5b3ad8a2a1988bfb

and what I want to get : https://gyazo.com/73471f96d3f7a8b6f41fcad04b7a190a

Creating all steps manually didn't help too. What I need to do for smoother animation? Thanks in advance.

P.S I have some other complex images which should be turned to animation. So I don't mind to other animation tools or creating it with svg, if those are more relevant.

Answer 1

Photoshop can only tween position, opacity, or effect parameters. Nothing more. Photoshop simply isn't built for making complex animations.

• Photoshop Help / Create frames using tweening

If you simply want to animate lines "drawing" then you can achieve that pretty easily with SVG and CSS. There is a lot of information on tools and methods for animating for the web—including SVG—in this previous Q&A:

• What's the best way to animate an illustration for the web?

If you need more complex animations then you will probably need to use actual animation software such as Adobe Flash/Animate, After Effects or something else like Toonboom.