Animation

How to Create Typography Animation Using Photoshop

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.

Step 1

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.

Step 1

Step 2

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.

Step 2

Step 3

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.

Step 3

Step 4

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.

Step 4

Step 5

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.

Step 5

Step 6

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.

Step 6

Step 7

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.

Step 7

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.

Conclusion

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.


Onextrapixel – Web Design and Development Online Magazine

Particle Animation in Web Design: Fresh Trend?

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

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.

Deutser

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.

Share the Force

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.

Seven Brief Lessons

Brandify

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.

Brandify

NYCIG Marathon

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.

NYCIG Marathon

Double Pi

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.

Double Pi

Sift Agent

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.

Sift Agent

Sony Experia

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.

Sony Experia

Signature Art

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.

Signature Art

Citak

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.

Citak

The Alkemistry

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.

The Alkemistry

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.

Think Less Love More

Decta

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.

Decta

NodePlus

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.

NodePlus

Petar Stojakovic

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.

Petar Stojakovic

VOID

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.

VOID

CloudNine

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.

CloudNine

Treskon

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.

Treskon

Fixed Group

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.

Fixed Group

Orion9

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.

Orion9

Conclusion

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?


Onextrapixel – Web Design and Development Online Magazine

Why and How to Liven Up Your Site: Animation in Web Design

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!

Lilia’s Planet

Lilia's Planet

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.

Today Flash technology has been successfully supplanted by a few better approaches like CSS and JavaScript coding. In addition, web designers have much more work to do than before, taking into account different issues during the development process like the look of animation on different screen resolutions, how it works on various browsers etc.

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.

Animated Illustrations

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

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.

More Examples

Look at a few more websites below. Maybe, there is the one that will inspire you.

Pragmatic Mates

Pragmatic Mates

Wine Industry Website Design

Wine Industry Website Design

Cameo by Vimeo

Cameo by Vimeo

Take It

Take It

Ice and Sky: The History of Climate Change

The History of Climate Change

Conclusion

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.


Onextrapixel – Web Design and Development Online Magazine

New Web Trends in Designing Part 2: Artistic Patterns, Grid Patterns and Animation Patterns

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.

Le Coq Sportif

iForex Blog

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.

iForex Blog

Cyborg Project

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.

Cyborg Project

AARK Collective

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.

AARK Collective

Websto

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.

Websto

Mint Teal

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.

Mint Teal

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.

For Better Coffee

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.

Fieldwork

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.

Fieldwork

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.

Summer Meltdown Fest

Ford Responde

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.

Ford Responde

iCentric

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.

iCentric

Lobster Kitchen

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.

Lobster Kitchen

Appetals

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.

Appetals

Dream Team

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.

Dream Team

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

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.

BlackBox Design

District 13

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.

District 13

Uniqlo Airism

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.

Uniqlo Airism

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 Formica Envisualizer

Good Patch

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.

Good Patch

Blue Ridge

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.

Blue Ridge

Conclusion

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?


Onextrapixel – Web Design and Development Online Magazine

Freebie: CSS3 Social Media Button Set (Flat, 3D, Text and with Rollover Animation)

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.

About Brusheezy

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.

Freebie: CSS3 Social Media Button Set (Flat, 3D, Text and with Rollover Animation)

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.


Onextrapixel – Web Design and Development Online Magazine

When To Use JavaScript vs. CSS3 for Animation

Animated web content has been around for years in the form of GIFs and Flash content. But as those older methods fall to the wayside newer techniques have grown in their place. Back in the early 2000s JavaScript was widely-regarded as the best solution for animated web content. Then an update to CSS created the CSS3 specification with all sorts of fancy new properties.

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?

featured javascript codes sample

I’d like to cover a few talking points related to website animation comparing the differences between JavaScript and CSS3. If you’re a developer then it’s worth learning both languages to empower yourself and your projects. If you’re a designer it’s still good to understand these concepts to better communicate your ideas with developers. Web animation is most certainly here to stay – the only question is, where will it advance from here?

Speed & Efficiency

By skimming this wonderful post about CSS vs JS animation speed it’s easy to see that CSS3 is a preferred natural option for supported web browsers. Regular-old JavaScript is also a great option if you want to hardcode all of that content. But it turns out that jQuery itself is a little slower – not super noticeable but still there.

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.

But JavaScript as a whole is tricky business. Unless you have some advanced development skills you’re really gonna need to work hard to get the animations you desire. It seems that CSS3 is growing much faster with both transitions and keyframe animation. The biggest downside is a serious lack of backwards compatibility.

So when it comes to speed I would say both CSS3 and typical JavaScript are good options. It really depends how much browser support you need. In fact you may even try out a pre-built library for these effects. For CSS3 there’s the very popular Animate.css while JavaScript has Velocity.js(among others).

Levels of Control

From a standpoint of objective control JavaScript seems to have greater jurisdiction over the municipality of Animationville. With JavaScript it’s possible to create any type of easing effect paired with any element on the page. Rotation, scale, explosions, anything you can imagine is possible with enough code.

But CSS3 is enticing because the animation properties are added directly onto the element.

css3 css coding development graphics

The biggest downside with CSS3 is a lack of trigger events. JavaScript contains a panoply of events such as mouseover, right-click, click-and-drag, or even targeting specific keypresses on the keyboard. CSS3 animation is handled through a change in class or pseudo-class. This relies on selectors like :hover or :active to perform the animation.

So when it comes to absolute power I would have to say JavaScript offers much more control. This is simply because JavaScript has been around longer and has been gestating for years with updates and code releases. CSS3 is still a newer invention that has been gaining a lot of momentum, but still has a long way to go.

Practical Usage

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.

css3 animated dropdown accordion menu

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.

CSS3 Keyframes

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.

mozilla developers network css3 keyframes

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.

Routines for Practicing Frontend Development

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.

Final Thoughts

So between CSS and Javascript, which is the better choice? As with all these fascinating conundrums the answer is kinda lame: it really depends on the circumstances. My personal preference is using CSS3 for nonessential animation like a button hover effect. JavaScript feels a bit cleaner for integrated animation like dropdown menus and carousel rotators only because of the wide browser support.

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.

The post When To Use JavaScript vs. CSS3 for Animation appeared first on SpyreStudios.


SpyreStudios