No matter what kind of website you have, a little bit of animation can go a long way to create visual interest and engage your visitors. From animated tab bars and CSS waves to creative text hovers, there are plenty of ways to spice up your website.
Animated Tab Bar
Here’s a simple and stylish tab bar that’s animated whenever a user clicks on a different icon. You can easily use this as a tab bar but you can also implement it in a menu to make your navigation more dynamic.
See the Pen Animated Tab Bar by abxlfazl khxrshidi (@abxlfazl)on CodePen.light
Simple CSS Waves
See the Pen Simple CSS Waves | Mobile & Full width by Goodkatz (@goodkatz)on CodePen.light
Lately, everyone’s been buzzing about space travel and this animation would highlight that topic perfectly. It features a space globe along with another sphere resembling a meteor. If you have any type of futuristic website or if you’re working on a technology oriented project, this animation could come in handy.
See the Pen Space globe – Three.js by isladjan (@isladjan)on CodePen.light
Here’s a fun animation that once again relies on pure CSS. If you decide to add it to your website, your footer will have a fun and playful gooey look. This animation would add a dose of interest to any creative website or website that’s not serving a corporate audience.
See the Pen CSS Goey footer by Zed Dash (@z-)on CodePen.light
Parallax Scroll Animation
See the Pen Parallax scroll animation by isladjan (@isladjan)on CodePen.light
Scroll Trigger Demo
At first glance, all you see is white background with black letters. But, when you scroll text and photos come into view and bring the entire thing to life. This animation would be a creative way to display any type of portfolio. Designers, photographers, and artists should definitely check this one out.
See the Pen GSAP ScrollTrigger – Demo by Noel Delgado (@noeldelgado)on CodePen.light
Toggles are pretty ubiquitous nowadays. But that doesn’t mean they have to be boring. With a bit of creativity, you can add simple animations and make them more fun. You’ll find a nice collection of various toggle animations, including a beer pong and a Kobe Bryant tribute.
See the Pen Toggles by Olivia Ng (@oliviale)on CodePen.light
Realistic Red Switch
CSS has indeed come a long way since its inception. This realistic red switch that relies on pure CSS animation is the best proof of what’s possible when you master CSS.
See the Pen Realistic Red Switch (Pure CSS) by Yoav Kadosh (@ykadosh)on CodePen.light
This animation would work well for any type of Valentine’s Day promotional campaign or on any website that caters to couples. It features a blue and pink neon heart that truly looks like neon lights.
See the Pen NEON LOVE by al-ro (@al-ro)on CodePen.light
Fluid Text Hover
Here’s another animation that at first glance looks like nothing special. Instead of a solid color, the text uses a photo fill. Once you hover over the word, the text becomes fluid. It’s pretty creative and it would work well on any artists or designer’s website that wants to show off their skills.