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 couldn't wrap my head around how they did it. It's so precise, I couldn't find anything on this besides "blob following path", but then how do they do the transition to these beautiful shapes(letters)?

  • 1
    It is possible to animate a series of PNG images or sprites using javascript. All that site does is animate that png image you've found – Scott Jul 7 '15 at 22:37
  • Scott, sorry to say but you're way off! I asked about the specific animation they made in AE. They had to do it in AE first. jQuery can take that huge PNG and animate it, yes, but they had to create the PNG first. – user46408 Jul 7 '15 at 22:49
  • 1
    You can create that png sprite sheet in pretty much any image editor and even in vector applications, that can export pngs. The png by itself is not an animation, so you hardly need after effects to do it. – Joonas Jul 7 '15 at 23:00
  • 2
    Animations do not have to be created in After Effects. Clearly that's a single PNG sprite that is simply moved via javascript. You can create that sprite in any number of a hundred apps. – Scott Jul 7 '15 at 23:03
  • Why not ask Panic? – allcaps Jul 22 '15 at 16:37

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.


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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