: Blob on path (precise), how did they do it? I just saw this animation: http://www.panic.lv/ (Load) and here's the animation, disected: http://www.panic.lv/assets/public/images/logo_400.png And I just

@Welton168

Another way of doing it (I've worked with it) is to simply create the animation in Adobe Flash. Using your drawing skills and tweens you can achieve this.

Also, the Onion Skin feature helps a lot with animation precision since it shows the transparent previous frames.

To export this easily you will need to use the Toolkit for CreateJS that publishes tweens, vector shapes, and symbol and it will create and export animated assets to HTML5. (This is just one way of doing it, you can either export frame-by-frame animation and play it via jQuery).


I just remembered another method from back in the day when I was
animating.


Do you know how anime is done? That's right, by hand. They draw sequences of the animation by hand and scan them, retrace the lines with computer software and fill in the gaps.

They are using spreadsheets the same way Flash uses the Onion Skin. So if you are more familiar with hand drawing, this would be a good approach for you.

Vote Up Vote Down

@Bethany839

That animation could have been done in many graphics program. I guess the one who made the animation did not create a motion path for a "blob" to follow since all off them look slightly different, instead he just created the shape with the pen tool(after effects) and then animate it across all the key frames.

He can export it as a gif sequence and play it on the web and use html5 to animate all other transition.

Vote Up Vote Down