10 Amazing Examples of CSS & JavaScript Animated Logos

9 min


carbon-animated-logo.gif



Take a peek over this gallery of 10 incredible examples of custom logo animations for unknown entities and world-famous brands alike.
1. Flowers SVG

One of the hottest animation trends on the web is SVG animation. It’s a growing topic of interest and this flower logo animation is a great example of SVG in action.
The icon & text of the logo has been created inside an <svg> tag in the HTML markup. Then sequential animations are controlled through CSS and automated on pageload. This requires a number of SVG-specific CSS properties like stroke-dashoffset which pushes outline motions in sequence to create this brilliant animated effect.
2. Carbon LDP
The Carbon LDP logo is fairly detailed and complex. But developer David McFeders took this to another level with his animated Carbon logo built on CSS/Compass.
Every piece of this code is easy to customize from the logo size to the animation speed. It’s built in pure CSS and made to loop endlessly. And even though the letters are made of a single PNG image you can always reverse-engineer that design with your own custom fonts.
3. Binary Lab
Binary Lab’s animated logo is one of the more complex animation effects in this list. It pulls numbers from a flask and fades them in & out of view above the logo.
The animation itself is controlled through CSS. But this pen also relies on the TweenMax library for adding repeating digits and custom alpha transitions. All-in-all a very creative use of CSS and JavaScript for modern web animation.
4. Pure CSS3 Stack Overflow
The Stack Overflow logo is one of my favorites because it’s simple, yet recognizable. And this snippet animates the Stack logo icon using nothing but pure CSS3.
This is by far one of the most impressive pure CSS animations I’ve seen. The final output really does look like the official logo and the animation feels smooth in every major browser. Anyone who loves pure CSS/SCSS animation will adore this snippet.
5. Monster Energy Logos
Tim Pietrusky animated this series of Monster Energy logos using SVGs and well-spaced CSS transitions. His code is free to study and replicate on your own if you want a similar fading effect on logos.
All of the animation timing is controlled directly through Sass which makes this a pure CSS animation. But you can alter variables to change the speed, fade colors, or pretty much anything else.
6. Subvisual
The team at Subvisual has a highly unique logo which was animated by Miguel Palhas. It works on two factors: the logo text and the “S” icon.
Everything is built on SVG elements which makes manipulation a bit easier. This pen also relies on the TweenLite library for JavaScript, although the vast majority of the animation is done via CSS. It’s a neat effect that can be repeated or triggered based on user action (hover, click, etc).
7. Pixel Logo Animation
Using the free pixel font Jura allows any developer to create a custom pixel-by-pixel animation effect. And that’s exactly what CodePen user Khaosmuhaha did in this pen.
It uses plain text manipulated through an HTML canvas element. The animations are powered by CSS3 animation properties, but they’re controlled through jQuery which makes the sequential pixel animation possible.
Definitely a cool effect and a fun use of the canvas element combined with a webfont.
8. Alex Aloia Logo
If you’re looking for a real complex logo animation then check out this example created by developer Alex Aloia. Using his name as the brand he created a complex series of SVG shapes which animate using a “drawing” effect.
The entire effect isn’t possible with only CSS. It requires a number of JS transformation libraries like DrawSVG and the more popular D3.js. But it’s a fun way to use open source libraries to create this one-of-a-kind animation.
9. Bayleys
The Bayleys logo is an obscure choice for animation. But it does have strong solid edges which makes re-creating the logo easy as pie.
That’s where Rafael Contreras comes in with his animation snippet using just 38 lines of code. The logo itself is built using SVG tags and the animation manipulates these tags accordingly. Many logo elements move in different directions making this effect mesmerizing to watch.
10. Nintendo Switch
The newest gaming console from the minds of Nintendo comes with a brilliant logo animation. This can be seen in all of their commercials and in this pen created by Koto Furumiya.
Koto re-built the Nintendo Switch logo using SVGs while animating the entire thing with CSS. And would you believe this animation only requires ~50 lines of CSS?
One thing I have to praise about this logo animation is the authenticity. It genuinely matches with Nintendo’s animation from the forceful push down and the rebound/bounce back up.
Wrapping Up
All of these examples are free and open source to study, clone, and manipulate for your own projects. I hope you like these demos and if you’re looking for more examples of CSS animation, take a look at this collection to see what other people have made.



Source link


Like it? Share with your friends!

0 Comments

What's Your Reaction?

Naughty Naughty
2
Naughty
Cry Cry
0
Cry
Cute Cute
6
Cute
LOL LOL
5
LOL
Love Love
4
Love
OMG OMG
4
OMG
WIN WIN
3
WIN
WTF WTF
2
WTF
Wow Wow
0
Wow
Angry Angry
4
Angry
Damn Damn
2
Damn
Dislike Dislike
2
Dislike
Like Like
0
Like
Huh Huh
4
Huh
Choose A Format
Story
Formatted Text with Embeds and Visuals
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Ranked List
Upvote or downvote to decide the best list item
Video
Youtube, Vimeo or Vine Embeds

Send this to a friend