Creating animations in JavaScript can be achieved in several ways. Here are the basics steps you need to do to create simple animations:
1. Request Animation Frame: This method informs the browser that you wish to perform an animation and requests that the browser schedule a repaint of the window for the next animation frame.
```
window.requestAnimationFrame(animateFunction);
function animateFunction(time) {
// animation code
}
```
1. CSS Transitions: These are a way to animate HTML elements from one style configuration to another. It’s a pure CSS approach to animation that’s well supported in modern browsers.
```
element.style.transition = “all 2s”;
// Changing the style property will animate the element.
element.style.width = “200px”;
```
1. setInterval or setTimeout: Both these functions are used to call a function or evaluate an expression at specified intervals in milliseconds.
```
setInterval (animateFunction,1000/30);
function animateFunction() {
// animation code
}
```
Remember, the smoother animations are usually achieved at 60fps (frames per second), which is approximately every 16.7ms.
You can also use JavaScript animation libraries like `GSAP`, `anime.js`, `Three.js`, `mo.js` etc. These libraries provide lots of easy to use methods that efficiently make the animation smooth and better.
Here is a simple example of how to animate a div moving across the screen:
```
```
In this example, the div starts at position 0 (`pos = 0`), and every time the animateDiv function is called, the position is increased by one pixel (`pos++`), and the style is updated. This creates the animation effect. The div stops moving once it has reached position 1000 (`pos < 1000`).
This is a very simple example. JavaScript animations can get complex quickly, but they can also create some amazing user experiences when done well.
