I have never created animations, but I want to make one for my website's home page. Basically what I have is an image where each chakra of human body is shown with its name. I want to show how the energy level moves in the body, from lowest chakra to top most chakra, changing the colors of the energy as they level up to a different chakra.

Which software can I use to make this animation?


For website animations, these are the main options I can think of:

Most of these options require practice (and/or knowledge of programming), so it depends on how comfortable you are with the tools. If you are familiar with graphic software and your animation is simple you could go for an animated GIF (that way you only need to draw each frame of the animation and then put them together).

  • Do I need to put every frame separately for every chakra? – Sunishtha Singh Aug 7 '13 at 21:13
  • 1
    In your case, if you want each chakra to light up for example, you would need 7 frames (Frame 1: chakra 1 colored/annotated, everything else off; Frame 2: chakra 2 colored/annotated, everything else off; and so on...) But it depends what you want to show. I suggest you read a bit about gif animations, it should clarify things. – Yisela Aug 7 '13 at 21:40
  • This answer doesn't recommend any software/programs... Isn't that what the question is about? – Zach Saucier Dec 9 '14 at 18:09
  • 1
    @ZachSaucier What do you mean? Flash is a program. But for web (and for this projects requirements) Javascript or CSS animation would be 100 times better. – Yisela Dec 10 '14 at 13:54
  • It seems to me like the OP was looking for some sort of animation editor – Zach Saucier Dec 10 '14 at 14:09

You could also try Adobe Edge Animate.

Another option is to create a jquery slideshow. jQuery Cycle with the Fade option would work well for this. You'd create each image in Illustrator or Photoshop and then cycle through them with the jQuery. If you're comfortable with jQuery, you can use the pager feature and use the HTML title for each image as the pager then position the pager with CSS. The text that you use for each image title will appear as a list so when a user clicks on that text, the appropriate slide will load. But this will require more advanced jQuery.

  • it sounds perfect, but seriously a master in jquery...hopefully wil give it a try. will help me in jquery codes if needed further. – Sunishtha Singh Aug 8 '13 at 19:40

Note: I have not tried any of these tools in depth.

The closest thing I can find to a full animator for the web is Animatron. It looks like it renders to Canvas, which means it is built on HTML5 and JavaScript. Another similar tool is HTML5Maker.

However, if you're just looking to create an online video there are lots of tools including Moovly, GoAnimate, and Wideo, but there are many more similar ones.

If you're looking for what technologies you can use for web animations, you should check out the question on here called What's the best way to animate an illustration for the web?

For anything more than a simple video type animation, especially something involving much user interaction, I recommend hiring a developer/animator (like me!) to create it it for you or to learn how to do it yourself.


If you are looking to create GIF images, you might want to try using Adobe After Effects which helps you to make a video.

  1. Create your video
  2. Import the (QuickTime format) video to Adobe Photoshop
  3. FileSave for Web & Devices...
  4. Select the format (.GIF)
  5. Save

Try http://daneden.github.io/animate.css/ and http://mynameismatthieu.com/WOW/ both work together like a charm with text or images and have many numerous effects with delay, scroll activation


Javascript and jQuery are best because they don't lag web page loading. But they require programming knowledge

Not the answer you're looking for? Browse other questions tagged or ask your own question.