![Web design trends: animated GIFs and SVGs](https://blog.tbhcreative.com/wp-content/uploads/animated-graphics.gif)
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](https://blog.tbhcreative.com/wp-content/uploads/animation-01.gif)
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](https://blog.tbhcreative.com/wp-content/uploads/animation-02.gif)
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](https://blog.tbhcreative.com/wp-content/uploads/animation-04.gif)
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](https://blog.tbhcreative.com/wp-content/uploads/animation-03.gif)
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](https://blog.tbhcreative.com/wp-content/uploads/animation-05.gif)
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](https://blog.tbhcreative.com/wp-content/uploads/animation-06.gif)
Learn how
If you’re interested in how these techniques are implemented, check out the links below for some helpful tutorials:- HubSpot: How to Create an Animated GIF
- The Layout: How to create gifs using Photoshop CC
- CSS Tricks: A Guide to SVG Animations (SMIL)
- MDN: SVG animation with SMIL
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