Typography animation is a wonderful way to deliver information in text, but in a visually appealing manner. If you want to spread your message in text, but without making it boring and monotonous, then typography animation can prove to be a great marketing medium for you.
It will be effective in delivering your message and at the same time keep the audience entertained. Your readers will definitely like the way letters will be presented to them.
Rendering your text information in a visually appealing way will be fundamental at grabbing the attention of your prospective readers. Moving text in an engaging manner will definitely encourage them to read. They will be intrigued to see what comes next. A large number of advertisements are using the technology of typography animation to promote their company and deliver their message.
Photoshop is one of the programs that I frequently use to create typography animations. Here, I’m going to give you a step-by-step guide to tell you how to create typography animation using Photoshop.
The first step is to select the text style as per the type of information you want to deliver. For instance, if you are creating content reflecting a tattoo company, then the color, pattern and style of the font should represent this style too. Photoshop has a whole lot of tattoo fonts that you can use in your animation.
Cut and paste your text in Photoshop, and roughly sketch the combination of words that you want to include in the animation, along with the style and other details. Photoshop is laden with a whole lot of layers and effects.
You can use them to create impressive typography animation for Internet, TV and other media.
With animation text, you can add effects to your letters and make them fly, move, expand, shrink or float. You may even make them laugh and give expressions just like humans. There are a multitude of backgrounds, colors, designs and patterns in Photoshop that you can use to create your typography animations. Choose animation on the text, and give varied emotions to your characters and letters.
Open Photoshop and click on File to create a new document. Choose the dimensions as per the individual requirements of your animation. Choose a suitable background for your animation, the pattern and color of which should best suit your typography animation. Select an appropriate font style and type or paste the text that you want to display. Also adjust the size of the text by changing the font size.
Depending upon the kind of animation that you want to give to your text, create many layers for that text. Select your text, go to Filters, and choose the filter that you want to apply. Photoshop has a whole lot of filters that you can try and apply. You can experiment as much as you want, and then decide the final one as per your personal requirements.
Photoshop has many brushes that even come with predefined artworks like symbols and emoticons. Keep the text layer at the base, and create more layers to include these brushes in your animation. You can even choose different patterns for different layers, including those for tattoo fonts.
The final step is to animate your text that you have textured and designed. Go to Windows menu, and open the Animation option. Create different frames for the same content. You may select the time frame and style the animation for all frames.
You may even paste the text and create different backgrounds and layers to them.
Finally, save your work in a GIF format which is the default format for animation files. Once you have learned how to create typography animation using Photoshop, your imagination will be bound by no limits. You can create any text styles that are available, and animate them to create typography animations.
Tips to create a good typography animation
Make sure that your typography animation is precise, to the point and not more than 3 minutes in duration. Your viewers will tend to wander away if it plays for too long.
Use a high quality audio file to support your animation. The soundtrack that you use should be clear and loud, without any distortions. Although typography animation is basically about seeing, the audio that plays with it need to be impressive too.
The video that you render should be exported on highest possible settings. It should be clear and concise. No one would be interested in your animation if they are not able to see it clearly or comprehend what’s written.
Spelling mistakes in your text are unforgivable, and it is important to check for typos before saving the final file. This sounds obvious, but you will frequently see animations with spelling and grammatical errors in them. Once you save your file, it’s not possible to go back and correct them, even if you notice the errors afterwards. So, check for typos beforehand to save your impression.
No doubt, animation is impressive and attractive. It has much more capability to grab attention of the viewers than plain text. A large number of graphic designers, creative artists, web designers and creative directors use the power of typography animation to give a distinctive look to their creations.
After going through this tutorial, you will be able to give an impressive animation effect to your text message, whether for personal or professional use.
We have already examined websites that have dynamic, abstract home pages, today we are going to delve a bit deeper into this mainstream and take a closer look at particle animation that has become a quite popular instrument for adorning ‘welcome’ sections.
From simple dots that are chaotically scattered throughout the screen to dots that form various simple geometric shapes and complex images, particles animations vary. It can be a bulk of vibrant balls, a scope of flat circles, a mass of plane triangles or a ton of pieces of different shapes. What’s more, their behavior can hardly be called similar. The developers force particles to move around something, react to users’ actions or follow the mouse cursor, vibrate or dance. Some of them take the leading position while others stay in the shadows performing a supporting role. Nevertheless, all of them have one thing in common: they unobtrusively give the interface a sense of motion and a geometric vibe. Let’s take a look at some fresh examples.
Particle Animation in Web Design
Deutser meets visitors with an ingenious welcome screen that embraces the power of minimalism. It includes a series of catchy titles that are bolstered by corresponding dynamic backgrounds. The latter steals the show with the particle animations that form various shapes and objects.
Share the Force
Share the Force matches the tone of the saga with its vigilantly designed cosmic theme. There are lots of interactive details, and of course, a particle animation that sets the backdrop to motion and greatly contributes to the general feeling.
Seven Brief Lessons
Here, the developer forms a circle from moving dots and forces them smoothly move around. Beautiful gradients strengthen the overall impression. The animation helps to focus users’ attention on the center and energize the homepage with dynamics.
Brandify utilizes a complex geometric centerpiece where particle animation plays the first fiddle. It serves as a supporting visual device that enriches the front page and saves it from looking boring. It interacts with the mouse cursor to engage users and add playfulness.
Splendid, professionally crafted particle animation that is displayed in a perspective takes NYCIG Marathon’s landing page to the next level. It produces the overwhelming first impression, drawing users into the project.
Not only does Double Pi leverage particle animation to prettify the main background, but it also offers visitors some kind of playground. Tiny dots form a tunnel that follows the mouse cursor throughout the browser screen. Thanks to a tiny size and well-thought-out performance the effect does not distract attention from the important things.
Sift Agent turns a cosmic theme to its advantage, giving the front page a marvelous appeal. Particle animation that is used to mimic star movement and create constellations fits here like a glove as well as makes its substantial contribution.
Sony Experia’s homepage receives the playful mood from a ton of bubbles that move around the project and result in the title. They stay active all the time and explode when the mouse cursor hits their area. Each sphere is linked to a photo.
Signature Art establishes a sense of elegance, refinement, and sophistication. The front page is a playground that lets you create your signature from a bulk of microscopic 3D particles. You can zoom in to the final result and even carefully explore each detail of it. This trick grabs the whole attention and makes you stay.
Citak gets the most out of minimalistic design, opting in favor of a light, clean coloring, a ton of white space, streamlined navigation bar and scarce amount of content. The team leverages an eye-catching colorful particle animation that naturally concentrates the overall attention on the main tagline.
The Alkemistry has a small private particle animation that enhances one of the blocks. It goes well with a constellation-inspired backdrop and adds vibration.
Think Less Love More
Think Less Love More is a fully interactive website that balances animations with simplicity. A yummy candy placed in the heart of the screen is bursting with personality and charisma. It is masterfully created from tiny pieces that set the homepage into motion.
Decta has a particle animation that perfectly echoes with a casual atmosphere of the project. It either forms a globe with tiny connections or breaks into pieces that chaotically move around the title.
NodePlus has a strong character and creative vibe. Here, flat multi-colored triangles dynamically form the letter ‘N’, giving it a 3 dimensional sense. As a result, the page is overloaded with energy and action.
Petar Stojakovic separates his personal portfolio from the others. With just one small animation, the ‘welcome’ screen gets an eye-catching and visually appealing look as well as puts the titles into a dominant position.
VOID is a top-notch website that greets the online audience with a series of matchless abstract animations. The first one is a trendy and exquisite particle animation that instantly demonstrates a high level of developer skills.
CloudNine’s website design appears to be a variation on a SuperHero theme that is realized in the cosmic surroundings. The scene is partly brought to life with the help of a small and subtle particle animation. It makes the background shine and vibrate.
Treskon features a video background with chaotic particles movement. It adds a subtle sense of motion to the homepage, gives enough prominence to the content and enriches the theme.
Here delicate particle animation that is slightly noticeable plays a supporting role as well as finishes off the overall design. It reinforces the aesthetics, enhances background and gives the page a non-static look.
Orion9 is an exclusive personal portfolio that at first sight may look a bit boring. The black-and-white color scheme, ‘Hello’ word and only several buttons to navigate – that is all that are included. However, after several seconds, a particle animation begins to fill the screen with dynamics and action, lightening the general atmosphere and encouraging users to continue through the website.
Particle animation sets a personal portfolio apart from others, helps to break the monotony of websites with a casual spirit, strengthens a theme and even benefits non-profit projects. It is a subtle yet powerful sub-trend that each day is gaining more strength.
What do you think about such types of animation? Does it advance the interface and user experience? Which one is the most original and visually-interesting?
Have you ever thought why animation movies are in vogue the same as the well-known movie franchises and blockbusters? The latest cartoons are the top box-office earners and this definitely meets the expectations of major film producers to the full extent. For example, the premiere of the “Minions” presented by Universal Pictures earned more than $ 1.1 billion all over the world. Pretty exciting, isn’t it?
Is this the most peachy global conspiracy, some worldwide parents consolidation created, in order to please their little ones altogether? Of course, it’s not. But it seems like kids are not the only passionate cartoon aficionados. Growing up, we keep this passion. Today’s technologies have evolved to the point, where computer animation wakens the child inside an adult, opening up another amazing source of entertainment and inspiration.
Liven Up Your Site With Animation
But why are human beings partial to graphic representations of the world around us? The answer lies somewhere around the notion that we call “soul”. This is some kind of explanation of how we live, move, feel and think.
Visual art became not just a form of self-expression, but as it turned out later, it is the way for our species to cheat death by sharing information throughout generations. Our natural craving for creating the illusion of motion reflexively led us to such an incredible outcome. From cave drawings and ancient civilizations’ writing to the invention of photography, television and, finally, internet there was a long path, within which illustration has been transformed into animation.
Animation in Web Design
The first steps of animation development in web design were made unknowingly. Everything began at the end of the 1980s with the advent of the .gif epoch. At the start, it was something funny, just “alive pics”, boding no boom. Afterwards, it was the first sign, showing that animation would bring a power of good to a website. It’s been almost 30 years, but the format is still relevant.
Flash animation arouses mixed feelings. Nobody can deny that this technology made a revolution in web design. With Flash it became possible to crank out animations, using manifold software. It was innovative, cheap and lightweight. Also, I forgot to mention mini games, built on Flash. Great stuff!
But time flies… With the emergence of responsive design and more powerful mobile devices like touch smartphones, tried-and-true Flash rendered its moot due to poor optimization and functionality.
Pros and Cons
If you are a website owner, think twice before using animation. Yes, this is definitely the great move to improve user experience, but there are some peculiararities you should not forget about.
First of all, always look at your website from a user’s perspective. Not yours. Forget about your own opinion. Examine your website potential audience. Learn what platforms are the most popular among the users. In the age of mobile devices prevailing animation must be responsive. Otherwise, say goodbye to smartphone and tablet users. They won’t forgive you bad animation performance for sure and will leave your website right off the bat.
One more important fact about performance is that the animation you apply has to be fast without affecting the website. In your haste for a stunning design you can simply overload your online business operability. Calculate your site loading time, preventing any troubles with CPU functioning. Animation slathers won’t benefit your website, and will merely aggravate its work. Don’t sacrifice the website work speed to make it cool looking. As a result, you will get neither of these.
Illustration is undoubtedly the fundamental ingredient of a “tasty” web design make-up, regardless of its purpose. At the same time, this is the “must-have” content for those who are engaged in creative work. Artists, designers and photographers have no right to error. After all, a website as an “objet d’arti” is another battlefield for them.
The benefits of pictures in website building are obvious. This is the perfect means for:
online business owners to represent a project, service and/or product;
web designers to prove professional skills and demonstrate their artwork first hand.
But what if a web designer combines illustration with animation? Being a much-loved trend in web design, the illusion of motion takes the fancy of many web artists. And the results can be really astonishing. The well made and applied animated pics double the chances of a web designer to lure visitors. Previously mentioned “creative minds” should implement such a gimmick to their design agency, photography portfolio, online gallery websites by all means.
Single-page Theme for Web Design Agency
Do Your Own Animations
There is a way, allowing every unskilled website owner to animate a website without extra assistance, using appropriate software.
Do you know something about so-called website builders? They are appreciated among people, who don’t have much time or resources to hire coders, programmers, web designers and managers to create a solid website, equal to an analogue made by a professional web design studio. Believe it or not, most website building platforms (e.g. Squarespace, Wix, MotoCMS) offer a pretty good tool set, providing an online business startup from square one. Using a website builder is like playing a game. Most of them are user-friendly and developed exactly for the website editing process simplification.
But that’s another story… Let’s go back to animation and its application by means of MotoCMS website builder in particular. This web editor has the functionality similar to its alternatives. There is only a slight difference in the use of other builders for animation.
In the MotoCMS admin panel it is possible to animate almost every website element like: menu, text blocks, pictures, buttons etc. There are up to 40 animation types with preview windows. Just click on the necessary element and find Animation subsection among Properties or Settings.
Look at a few more websites below. Maybe, there is the one that will inspire you.
Wine Industry Website Design
Cameo by Vimeo
Ice and Sky: The History of Climate Change
It’s a safe bet that animation practice in web design will gather speed in the future. These days the illusion of motion becomes more and more popular among website owners, as well as web designers. This is an excellent means that will take any website’s user experience to a higher level. The only condition is the wise usage of such an advantage.
When Chris first started the CSS-Tricks redesign, he came to me with some screenshots of the direction it was headed in, and suggested that I make an animation for the logo as part of the design refresh. I was excited about this project, and my mind immediately started to shuffle through possible animation and interaction.
It was around this time that Jack and Carl from GreenSock were mentioning to me that they were building out the MorphSVG Plugin, which can morph complex SVG shapes, even when the number of path points are not the same. I felt that this project would be a good candidate to learn this new (and pretty amazing) technology. Also around this time, Val Head came out with “Designing Safer Web Animation for Motion Sensitivity” in A List Apart, suggesting a toggle for UI animation that causes a lot of movement.
I was interested in incorporating the CSS-Tricks logo, the “wild-card selector” star, with some morphing behavior from the type logo itself. The “K” in tricks, being almost a half-star itself, became a good prospect for this shape’s morphing target.
One of the coolest things GreenSock has made with the MorphPlugin release is a helper plugin called findShapeIndex. This plugin helps you pick the best type of morph for your animation by letting you cycle through the tweening points, if you want to be particular about the way the shape morphs. The default is auto, which will work most of the time. But, when you want to have slightly more control, it’s a huge boon to be able to use this plugin to see all of the possible variations for these tweens. You load it up, point it from one ID to another: findShapeIndex("#hex", "#star");, and a nice GUI appears.
When I was first creating this, though, that plugin didn’t exist yet. So, I found that to really control the “in-between” state of the “K” and the star, I could make it look best if I designed a half-star, one that married the two states:
When I encourage others to try their hand at animation, I find it important to stress that my animation projects don’t happen overnight, and I usually don’t just make one iteration of them to get to the final piece. This project was no exception. My first iteration was much more pared-down (hit the replay button to see the animation):
I had the star and “K” morph, but originally thought to morph the star into a few dots that spun using motion along a path with the Bezier Plugin, built into TweenMax. The star circles rotate by using very simple array of path points:
Then, when I set the curviness to 2, I get a full circle. The demo below shows that by increasing the curviness, you can surpass the point where a simple curve is created, and that 2 is optimal for rounding between four points.
But after all of this, I was a little unsatisfied with the outcome. It worked, but lacked some… energy and… pizzaz? I asked Chris for some art direction, and he suggested the characters morph into “CSS-TRIK*Z” and back again.
Further Design Refinements
Working from what I learned in the original attempt, I decided that I really liked the “K” and the star. I then decided to take that a step further, with many characters in motion. The “C”, “K”, and “S” at the end all clearly needed to move in order to become other characters. Working from the star, I started to sketch:
I find that ugly storyboards save me a lot of time. It takes me 15 seconds to jot down these visual notes to myself, and then when I head to Illustrator to flesh out my ideas, I have a gameplan. One of the most fundamental things I’ve learned in designing for animation is that it makes a lot of sense to design everything, and then unveil elements slowly.
By working within a tech theme, it was pretty easy to notice correlations in the letter shapes with possibilities for their morphing counterparts. I explored icomoon.io and saw a link icon that looked a little like an “S” if I just rotated it, and the GitHub fork icon that resembles a “T”, and all I had to do when I placed them in the Illustrator file was tweak the path data to match the widths and heights of the lettering in the logo.
To complement the star, I wanted something planet-like. I considered that the rings on Saturn could then turn into the CSS bracket, which also had potential to look like a “K”. The “S” and “Z” were a pretty straightforward flipping morph, but when I really considered the “Z”, it had the potential to look like code brackets: </>. I originally had some typing of a tag happen in between the brackets, but it slowed all of the animation down to accommodate that movement and was a little too busy, so I cut it out. Again, all of my animations go through many stages of iteration, and sometimes I’ll spend a while creating and coding something that doesn’t make the cut. Hey, that’s show business.
As I work along in Illustrator, I’ve made sure to properly name all of the pieces I’m working with so I can find my way in the code.
The original logo was converted to outlines, but had it not been, I would need to conver it to work with the path data for each letter. You may find that something like a logo is a compound path that’s hard to manipulate. In this case, you can draw a simple line through it in between the letters, open the pathfinder window, and choose “divide”. This should split the paths apart for you so you can use them each separately.
When exporting the full SVG, I optimize my code so that it’s not bloated and it’s easy to read. I usually use Jake Archibald’s SVGOMG, built from the very powerful terminal-based SVGO, but with a wonderful and helpful GUI so you can see what you are exporting. Since I spent all that time naming each path, and placing them in understandable groups, I make sure to uncheck “clean IDs” and “collapse useless groups”, otherwise I would strip away all of the identification of these path attributes.
Final Animation Development
The morphing itself is incredibly simple due to GreenSock’s plugin. You can point from one ID to another and it does the heavy lifting for you:
While working along on this, it made a lot of sense to use a relative label in the timeline:
That way I can make sure all of the animation begins at the same point in the timeline. It also means I can keep track of around when they should all finish their journey. In this case, you can see it all ends around 2.5 in, or "begin+=2.5".
I set the whole animation in the timeline to be much slower while I’m working so that I can really analyze every single movement—easy to do with one line of code:
Then, when I have all the movements down, I can adjust this until I have a timescale that I think works well for the motion, in this case:
I usually don’t use linear eases that much in my animations, but morphing tends to look really nice with a smooth linear ease. To visualize the different types of eases available, check out this great Ease Visualizer tool. I use “back” type eases in this sparingly, to accent to the linear ease and call attention to moments that I want to take precedence and call out in a slightly exaggerated way—in this case, the ring of Saturn morph, or the final star morph. (Click the orange toggle in the dash to activate the animation. You may need to hit rerun first.)
I store any ID I use more than once in the animation as a variable to prevent multiple lookups. I can also store the path data from a letter if I need to use it a few times in the course of the animation, such as when I need something to tween to the same shape more than once:
var tPath = t.getAttribute("d");
The really cool thing about using GSAP’s timeline is that in order for the whole animation to be played backwards and forwards upon something like a click interaction, I can pause the timeline initially, then play the timeline for the first iteration, and reverse it for the alternate.
That’s jQuery using jQuery 3.0, which is the first version of jQuery to support SVG class operations. I also have a separate tween for the hover, to alert the viewer to the fact that the toggle works as a trigger, with a function called bloop for the popping repeated circle, as well as scale that works on mouseenter.
The dot had to move back and forth between the toggle, but the forward and reverse of timelines lent itself well to that kind of behavior. I simply added the dot moving across in the master timeline, so that when it reversed on the second state, it retraced its steps across the dash, indicating where we were in the state of the animation.
And there we have it! A nice “Easter egg” logo morph animation.
Last time we considered brand-new types of patterns such as generative and data-inspired. Today we are going to take a look at some others, including classic ones that have been given a refreshing uplift, static ones that are based on a grid and another dynamic patterns that are used for animations.
Artistic Patterns, Grid Patterns and Animation Patterns in Web Design
Artistic Patterns Traditional patterns to which we are so accustomed recently have received a creative boost. They are no longer simple shapes or 8-pixel size objects; they are relatively huge drawings, sketches and tiny illustrations with lots of color and details.
Le Coq Sportif
Le Coq Sportif is spiced up with a dose of personality. Crafty pattern with a 3D flair goes well with line style graphics and images that are neatly scattered throughout the page.
iForex Blog has a marvelous artistic aesthetic. Beautiful illustrations that recreate the whole atmosphere transmit the message. Pattern is a vital detail of all the composition that enriches the design.
Cyborg Project is a blog about colors and the world of cyborgs. So that such a radiant background that strikes the eye from the first seconds is an ideal option. Although the canvas is certainly overwhelming, the content area stays above it and provides users with optimal readability.
AARK Collective features a series of fantastic, unconventional artworks that are used as patterns for the background. It strengthens the brand and adds a note of refinement.
Websto is based on a classic vertical striped pattern that reproduces a candy shop feeling with an appetizing air. The yummy backdrop certainly gives the website a cutting-edge feel. Primary color palette and decorative font reinforce the theme.
Mint Teal leverages simple geometric forms to enrich the background, making it more appealing and setting up a proper atmosphere. The solution is simple and elegant. Gorgeous coloring, lots of white space and a splendid pattern from the good old days add to the design a particular charm.
For Better Coffee
Here the background is pretty loud thanks to an enormous visual weight. Bright coloring and flat style play here the first fiddle. Although it is highly saturated and content-intensive, nevertheless, it does not overpower online visitors, on the contrary, it gently lures them into the project.
Animation Patterns It has almost become a tradition to charge front pages with motion, especially if they employ an illustrative environment. Use of static dramatic scenes is not enough to satisfy today’s audience demands. Users crave animations, action and a touch of playfulness and amusement. So that short animation patterns are becoming more and more popular.
The front page of Fieldwork is marked by a vibrant flat style animation that catches the eye with its interesting and unique idea. Several processes are looped in order to provide the project with constant dynamics and motion as well as symbolize an assembly line.
Summer Meltdown Fest
Summer Meltdown Fest owes its eye-pleasing and wonderful appearance to an illustration that has a dose of naturalness and freshness. Several objects of the composition are energized with subtle motion to make it look more alive.
Ford Responde is a matchless website with lots of cutting-edge details. An animation pattern is used to make the backdrop suitable for the dynamic object at the heart of the page. It contributes to attitude and supports the spirit.
iCentric leverages a sleek, dynamic pattern to make the photo manipulation look more exceptional and energized. The artist combines particle animation and subtle motion to achieve such an impressive result.
Lobster Kitchen has an admirable marine motif that support the restaurant name. Here an illustrative environment that welcomes the online audience is powered by several tiny animation patterns. They bring to life clouds, seagulls, and ships, offering a memorable experience.
Appetals has a strong personality and charisma. Marvelous hand-drawn icons and illustrations that form the main background strengthen the overall aesthetics. Animation patterns are used to force some objects to blink thereby adding a sleek touch of motion.
Dream Team boasts a refined and exquisite appearance. The beauty of the homepage lies in a gorgeous smooth pastel coloring, nifty ghost buttons, line style graphics and a delicate animation pattern that maintains users’ focus at the center.
Grid Patterns Creatives use grids everywhere, so why not to get the advantage of its ability of perfectly organizing stuff for prettifying backgrounds. There are some examples below that demonstrate it in practice.
BlackBox Design utilizes a grid style pattern that has a boxy appeal to adapt the background to foreground structure on the right. As a result, they fit together like two pieces of the puzzle. The dark coloring enhances the effect.
District 13 uses a very similar approach, yet in this case cells are much bigger, and they hide data that can be revealed on demand. The front page is a masterpiece, where the pattern plays an important and connecting role.
Here each cell features an elegant animated glyph and is based on a soft pastel monotone background. This dynamic grid pattern is a tool for entertainment and interaction with the online audience.
The Formica Envisualizer
The Formica Envisualizer makes use of several intricate crafty visually-appealing patterns that decorate sections of the website. Regular geometric shapes paired up with gorgeous soft coloring give each area a sprucing up.
The backdrop of Good Patch can be partly attributed to the grid pattern. A bunch of flat solid colored circles are scattered throughout the homepage adding a nice zest to the aesthetics. They perfectly contribute to the theme and reinforce visual appeal.
The landing page of Blue Ridge has a splash of personality and a powerful business-like vibe. It easily complements the brand’s identity and sets up a comfortable environment. Grid pattern used for the backdrop glues everything together and strengthens the general impression.
To sum up both articles, patterns are still popular instruments for creating marvelous aesthetics. The listed above and previously discussed types of patterns are no more and no less than fresh and original takes on a method of decorating canvases. Not all of them are popular, yet all of them are trendy. Thus, crafty and grid patterns are rare, though they have a huge personality.
Animation, generative and data-inspired patterns run the show this year; they are primary tools for making the project look outstanding and modern. So, share with us your thoughts?
Social media has been an indispensable part of today’s digital life. Whether you have a blog, website or webpage, you would have to add the social media buttons. Today, we are glad to release a set of CSS3 Social Media Buttons in 3D, flat, text and with rollover animation style.
The set covers 25 different types of social media and they can be easily customisable for your needs.
Brusheezy is a community that provides a place for artists to create and exchange Photoshop Brushes, Photoshop Patterns, Textures, Actions, Shapes and other design resources related to Photoshop. Check out more free web resources at Brusheezy.
Download CSS3 Social Media Button Set
Feel free to use this icons set for personal or commercial projects but please do not sell, modify, distribute or host them elsewhere whether online or offline.
If you would like to share this freebie, please help us spread the word by linking back to this original release.
We offer our sincere thanks to Brusheezy for creating this icons pack and we really appreciate their efforts.
Our freebies are created especially for our readers at Onextrapixel and the design community. If you’d like to release any freebies on Onextrapixel, feel free to contact us and we will be more than happy to assist you.
Want This Freebie? Enter Your Email and Download Free!
Simply enter your email address below and click the download button. The download link will be sent to you by email, or if you have already subscribed, the download will begin immediately.
Among these new properties are some amazingly powerful codes for animated content on the page. It’s now possible for frontend web developers to craft a dynamic website using only HTML and CSS code. But is this really the most viable option?
Speed & Efficiency
jQuery wasn’t created to be an animation library. In fact, a secondary library jQuery UI was created with some animation functionality, but that still wasn’t the overall goal. I would still honestly suggest using jQuery for simple stuff because it’ll be much more supported in comparison with CSS3 transition effects.
Levels of Control
But CSS3 is enticing because the animation properties are added directly onto the element.
Many times you’ll find animation effects online that just seem ridiculous. It’s really cool to build an animated printer or snowfall effect – but this kinda stuff doesn’t have much practical value. Web design is always about the user first. Therefore your animation should enhance the user experience and not just add pretty frills onto the page.
So what does have value? Well for starters you might try loading animations like spinners and animated graphics. These elements denote when a page is in the middle of loading or preloading resources. You might also want to create dynamic effects in a carousel or perhaps a contact form with label hints for each field.
Getting down into the meat & potatoes there is a lot of pragmatic stuff you can build with animated effects. For example, dropdown menus and tabbed widgets are built upon hidden content. When a user interacts with the menu or tab links the invisible content is swapped into view.
My honest recommendation when it comes to animated effects is to keep it all simple. If you’re gonna go overboard make sure that it really fits into the layout style. For example, a cartoony layout can get away with exaggerated animation effects to replicate the squash and stretch effect found in cartoons. Try out lots of different ideas and see what type of animation you like the most.
If you’re adamant to learn in-depth CSS3 animation then you’ll have to get into keyframing. The generic transition effects can be useful for simple stuff, but they really just scratch the surface. Keyframe animation gives the developer so much more control over which elements are moving, how they’re moving, and where they end up.
CSS-Tricks has an excellent guide on keyframe syntax which I recommend you attempt to memorize. There are a few browser prefixes which can be difficult to retain in your head, so alternatively you might store this code as a snippet. Also check out the Mozilla @keyframes reference documentation for in-depth info.
Frontend development has advanced so quickly over the past few years. I never would have imagined something like keyframes being implemented into CSS when I first began studying web design in 2005. So much has changed and if you want to keep up with the times, you’ll have to at least try to change your methods as well.
Additionally if you want to push your CSS skills to the next level it’s worth learning about SASS. That stands for Syntactically Awesome StyleSheets and it basically allows developers to compile CSS code much like a programming IDE. If you take the time to learn SASS it will save you hours of copying & pasting code. The Animate.css library even has a SASS version to give you a starting point.
Ultimately it is your decision and there’s no wrong answer. Take this as an exploration into modern web animation and mix it up with each project. Don’t be afraid of pushing boundaries to see how far you can go.