HTML CSS JS Result EDIT ON Advanced SVG Shape Morphing MorphSVGPlugin morphs any SVG regardless of number of points. .st0{fill:#000;stroke:#000000;stroke-miterlimit:10;} .st1{fill:#CCCCCC;} svg { width:600px; } #hippo, #elephant, #star{ visibility:hidden; } #slider { width:560px; margin:20px 0; } h1 { font-size:30px; } h2 { font-size:16px; } //From 7 Hidden Gems of GSAP (Net Magazine) //Read full article: https://medium.com/net-magazine/7-hidden-gems-of-the-greensock-animation-platform-4fb71389f6ca#.t6xniz19i /* Try GreenSock's MorphSVGPlugin for free. - Press the Fork button - add your own SVG, JS and HTML - have fun. Learn more about MorphSVGPlugin here: https://greensock.com/morphSVG MorphSVGPlugin is a bonus plugin for Shocking Green and Business Green members: https://www.greensock.com/club */ // Demo for 7 Hidden Gems of GSAP article that was published in the June 2016 edition of Net Magazine. Learn more: https://greensock.com/gems var tl = new TimelineLite(), circle = document.getElementById("circle"); tl.to(circle, 1, {morphSVG:"#hippo"}, "+=1") .to(circle, 1, {morphSVG:"#star"}, "+=1") .to(circle, 1, {morphSVG:"#elephant"}, "+=1") .to(circle, 1, {morphSVG:circle}, "+=1");