Home / CSS / Creating Animations Through JavaScript Or CSS

Creating Animations Through JavaScript Or CSS

A web script is a code that enables web browsers to do more than just display static web results. Scripts are very important in web design to create dynamic pages and DHTML. Dynamic HTML or DHTML is a collection of technologies used in creating interactive and animated web sites through a combination of HTML, client-side scripting language such as JavaScript, a presentation definition language in the likes of CSS and Document Object Model. In simple words, DHTML is a combination of JavaScript, CSS and HTML. However, DHTML is now more known as unobtrusive JavaScript coding to place more emphasis on agreed-upon best practices.

How to create animations in web design

CSS animations are powerful elements that can be used to make an eye catching web design. In many instances CSS is easier to implement than JavaScript-based animations because they allow for more intricate motions than CSS transitions. However, the @keyframe API can be a lot more difficult to use for ambitious animations. Even if the animation is simple, it can be a lot difficult to convert the animation that is in your mind. These challenges are addressed by using a tool called Stylie. Stylie is an open source graphical web app that can be employed in the creation of CSS @keyframe. Codes that will normally take hours to do manually can be visually constructed in complex sequences within minutes. When you do not code by hand, not only does it cut down on the time to do animations, it makes iteration much easier.

Creating animations through HTML

Aside from CSS, you can use JavaScript in creating animations but the choice will depend on the project and the kind effects that should be achieved. JavaScript is used for advanced effects like bouncing, stop, pause, rewind or slow-down. CSS is used for simple animations like one-shot transitions and toggling of UI element states. When you use JavaScript, you have more control over the animation like when creating animation that needs to stop, pause, slow down or reverse. On the other hand, JavaScript is more complex than simply writing CSS transitions and animations but it usually provides more power to a web developer.

How much animation do you need?

Once you get all the basics down, either for CSS or JavaScript, the next question is how to determine how much or how less a website needs animation? Although it is good to keep the viewer’s engaged, there is always such a thing as “too much.” Looking at one sample website, say the surprisingly unexpected fanbase of brony.com, although content-wise, there are a lot but with very less animation as expected for a website that came from an animated TV show. This is a good example of when you can add more animation to the website, and it is a very safe venture since most if not all visitors would enjoy a good animation. A contrast to that would be a serious business website, such as edition.cnn.com. There are a lot of news content here, text and images alike. If you put in too much animation here, it could backfire as it might distract the readers, or annoy them. So just because it can be animated, doesn’t mean it should. It is always best to consider what your website is about first, then decide how much animation you need.

About morrisvmansour

Check Also

A Very Brief Glimpse Into The World Of Web Scripts

Most users are not familiar with web scripts because they are not actually visible. Web …