Web design trends: Animated GIFs and SVGs

Adding movement to your website can help it make it more dynamic and interesting for users. There are a variety of modern techniques for adding movement to your website, from videos to advanced CSS techniques to animated graphics. Animated graphics, in particular, can be an easy and fun way to add a sense of interactivity to your website.
Web design trends: animated GIFs and SVGs

We’ve discussed the re-emergence of the animated GIF in web design in the past, and this continues to be a popular trend. Furthermore, animated SVGs (scalable vector graphics) have become a popular choice as well for adding movement to a website. In this showcase, we’ll explore some websites that have successfully and creatively integrated animated GIFs or SVGs into their designs.

Stumptown Coffee: Loading graphic animation (GIF)

This website uses animated GIFs for the loading graphics that display before the products are fully loaded.
Stumptown Coffee use of animated GIFs on homepage
View it live: https://www.stumptowncoffee.com/

Web Designer Depot: Logo animation (SVG)

The logo in the header of the Web Designer Depot website animates when hovered over.
Animated Logo on Web Designer Depot's website
View it live: http://www.webdesignerdepot.com/

Froont: Graphic element animation (GIF)

The Froont website uses animated GIFs on its homepage to help illustrate its main features.
Animated GIF on Froont's homepage
View it live: http://froont.com/

We Ain’t Plastic: Heading animation (SVG)

The title headings on the We Ain’t Plastic website animate as you scroll down the page, adding a sense of interactivity.
using an SVG to animate website header
View it live: http://www.weaintplastic.com/

Icons Responsive: Hero graphic animation (GIF)

The Icons Responsive site used an animated GIF in its hero section to showcase how their icons work.
Using a GIF to animate hero grapic
View it live: http://iconsresponsive.com/

Melanie Daveid: Title graphic animation (SVG)

The hero graphic on the Melanie Daveid website uses an SVG animation, making it more dynamic
Title graphic animation with an SVG
View it live: http://melaniedaveid.com/

Learn how

If you’re interested in how these techniques are implemented, check out the links below for some helpful tutorials:


Add interest to your website
TBH Creative can help you develop a strategy and choose the best methods for improving your website with our variety of web design services. 
Ready to revamp your website? Start here
Kayleigh

About the author | Kayleigh Circle

Kayleigh is a web developer at TBH Creative, specializing in front-end development and responsive design. She likes to blog about a variety of web design topics, including design tips, the latest trends in the industry, and how to make your website more successful.

View more posts by Kayleigh

Receive articles in your inbox