Nice animation made using the GSAP Tweenmax plugin. The animation is completely made using the SVG animation functionality.Īn astronaut shooting into space with it’s rainbow-powered jet pack(?). Watch the smooth movement of the second-hand in this clock showing the current time.

The legs use SVG animation while other parts use CSS3 animation. The movement of the objects in this demo is a combination of SVG and CSS3 animation. Use the slider to access the frames from any point.Ī unique and funny loop animation depicting the characters’ walk. It is an infographic come to life, made with animation. See how smooth the transition is between the two objects.Īn awesome animation by Sarah Drasner, powered by GSAP timeline. Menu toggle animation by Tamino MartiniusĪ morphing animation of the hamburger icon turning into a cross icon. The moves and transformations are created using CSS animation. The transformation is done with CSS animation.Īn animation that illustrate cities and popular tourist destinations in the world. This animation shows you how a heart icon is made from two circles and a square. Here’s a subtle but not easy to miss moving text gradient that typography lovers will love. With this animation, when you “release” the page, the Send icon changes into a Plane icon and gets released into the air.Īnimated Gradient on Text by Patrick Young Most pages allow you to “pull down” on the page to refresh. A nice concept applied on a Material Design-inspired application sidebar. The sidebar becomes elastic when you try to pull it away from the side. Made only with CSS, a border forms smoothly around the text, when you hover over the “HOVER” instruction. Some use SVG animation, others use CSS transform for basic animation, and the rest use the help of JavaScript. Here I have compiled some amazing animated SVG. JS is good practice for creating animation. Another way is by using JavaScript engines such as GSAP or Snap. You can use both the built-in SVG animation functionality or CSS3 animation (note that not everything can be done by CSS so there is still need for JavaScript). Working with SVG, we enjoy good browser support for SVG animation, and we have more ways to create new animation. However, due to the limitations of HTML elements in creating patterns, shapes, and others, they naturally turn to SVG, which offers more interesting capabilities. Designers used to create animations in HTML elements using CSS.

I am a leaf on the wind svg