Images like GIFs limited to 256 colours are not suitable for rendering smooth gradients or photographs, but are suitable for simpler images with solid areas of colour.
Otherwise, something called "colour banding" results. Your avatar works since it's mostly flat colour, what you're trying to do is, well, not. The only way to really ease banding is through dithering, like in the above link. The program you're using doesn't dither when translating the frames into 256-colour. Find one that does.
Personally, all I do is use Sony Vegas, change the size/framerate to what I want, export it as PNG frames, then use the animated gif plugin for Paint.NET to make them into a gif. It sounds like a long process but each step takes about 2 seconds. There's methods which involve specialized programs that can allow you to choose how much dithering to use per frame to trade filesize/banding.
Spoiler: An example of a long, large, complex-colour, high-framerate result (3.67MB) (Open)
Spoiler: An example of a smaller, complex-colour, slightly slower framerate result (0.99MB) (Open)
Spoiler: An example of a large, smooth, very simple colour result (632kb) (Open)
Remember that GIFs are timed in centiseconds (1/10th of a second). If you're dealing with constant-framerate video material, remember to adjust the delay speed accordingly to the framerate. For example, the inverse of video running at 15 frames per second would be 1/15 = 0.06666 seconds per frame. Multiply that number by 100 to convert the result to centiseconds. This, rounded up, would mean you'd have a delay of 7cs between frames.
Remember that size goes up exponentially with colour detail (flat colours or lots of dithering) and framerate. I could make these a lot smaller by removing/reducing the amount of dithering if I could be assed to.