How to Create Animations using Javascript

January 12, 2017

Learn how to create animations using JavaScript.

A Basic Web Page

To demonstrate how to create HTML animations with JavaScript, we can use a simple web page.

CODE:

<!DOCTYPE html>
<html>
<body><h1>My First JavaScript Animation</h1><div id ="myContainer">
<div id ="myAnimation">My animation will go here</div>
</div>

</body>
<html>

Styling the Elements

To make an animation possible, the animated element must be animated relative to a "parent container".

The container element should be created with style = "position: relative".

The animation element should be created with style = "position: absolute".

CODE:

#myContainer {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height: 50px;
position: absolute;
background: red;
}

The Animation Code

JavaScript animations are done by programming gradual changes in an element's style.

The changes are called by a timer. When the timer interval is small, the animation looks continuous.

The basic code is:

CODE:

var id = setInterval(frame, 5);

function frame() {
if (/* test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}

Create the Animation Using JavaScript

CODE:

FULL CODE:

<!DOCTYPE html> <html> <style> #myContainer { width: 400px; height: 400px; position: relative; background: yellow; } #myAnimation { width: 50px; height: 50px; position: absolute; background-color: red; } </style> <body>

<p>
<button onclick="myMove()">Click Me</button>
</p>

</body>
</html>

CLICK HERE TO SEE WORKING DEMO OF JAVASCRIPT ANIMATION

Back to CodeTrove

We bring it for information professionals and clients.

Being an Information Professional can be a daunting reality. Information Professionals come in all shapes and sizes. We are academics, librarians, archivists, curators, data analysts, systems analysts, information architects, database engineers, software engineers, Web and Mobile developers, content marketers, bloggers, copy writers, project managers, scrum masters, podcasters and a thousand other possibilities. We work in universities, institutions, corporations, and as self-employed freelancers. We work as employees, owners, contractors, remote workers and digital nomads. So, where does an information professional turn to make sense and order of the din and best position him or herself for success? The IAM Platform is designed precisely to answer that question. Information Access and Management is a VAST subject that concerns not only how information professionals interact with information, but how our interaction with information changes the information landscape itself and thereby our possibilities. With the IAM Platform, information professionals can find a reliable home where access to support and work integrate fully with whatever work style or life style they have chosen. You're never alone with IAM.

Being a Client in the information economy can be overwhelming. It seems like just when Clients have finally gotten a good foundational understanding of the information landscape everything changes, and sometimes overnight! So how do Clients looking for products and services that drive success in today's sharing economy navigate such changing waters? The IAM Platform of Products and Services is designed to answer precisely that question. Our unique community of the highest quality information professionals coupled with years of project management experience guarantees that your needs will be met with the exact solution they require, every time. Our insistence upon your satisfaction includes your own personal concierge treatment throughout your project life cycle. Finally our outstanding community atmosphere and rigorous testing procedures allow all bugs to be shallow so your project stands the best chance of entering the marketplace already anticipating most of the errors that could take place on launch. If errors do crop up, we stand by our work, 100%.

The best place to start is to hit up our Network. The button below takes you there. Just fill out a simple registration form, it's free, and you will have access to our growing knowledge base in a growing number of areas tailored for every flavor of information work. We are working hard to create a community of information professionals and clients where everyone will have a voice. If you don't find what you are looking for or there isn't anything available for your kind of information work or client needs, contact us and we can create a section for that kind of work. Once we do, maybe you can be the person who starts that area up and works it. We look forward to working with you to tackle one of the most pressing issues of our time, Information Access and Management.

Go Now!