Is there any way to do this animation with Framer?
This actually got nothing to do with "framer". Framer is a js framework made for interaction design what you see there is a basic drawing animation with some physical bounces and springs.
You can easily archive that with basic SVG interaction like here: http://codepen.io/MyXoToD/blog/howto-self-drawing-svg-animation . However, to recreate a similar morphing effect from one SVG to another you really should know some advanced CSS or JS.
Yet, as with every "animation", using AFX/AE is the fastest thus most effective way and in this case there is no need for any interaction at all so why not simply including a gif of the animation.
If you aspire a tweening via touch/click you need to opt for the SVG manipulation above.
Thanks Andreas Mitschke. The manipulation of SVG's was what I needed.