Animate element using Javascript vanilla

user_4921525 0
Viewed 7618

How can I animate an element with Javascript vanilla? Similar with jquery. Example:

$( "button.continue" ).animate({left: "100px", top: "200px"}, 5000);

Where we pass the attribute, the desired value and the time.

In my case I need the left and top position to animate and slide.

Solution

I've done as @IceMetalPunk sugested and added the animation by css only when I need to animate.

document.getElementById("animate").addEventListener("click", function(){
  let e = document.getElementById('elementToAnimate');

  e.classList.add("animate");
  setTimeout(()=> e.classList.remove("animate"), 500);

  e.style.top = Math.floor(Math.random() * window.innerHeight) + 'px';
  e.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
});

document.getElementById("dontAnimate").addEventListener("click", function(){
  let e = document.getElementById('elementToAnimate');

  e.style.top = Math.floor(Math.random() * window.innerHeight) + 'px';
  e.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
});
#elementToAnimate {
  width: 20px;
  height: 20px;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
}

#elementToAnimate.animate {
  transition: left 500ms ease-in-out, top 500ms ease-in-out;
}
<div id="elementToAnimate"></div>

<button id="animate">Animate</button>
<button id="dontAnimate">Dont Animate</button>

animation javascript
4 Answers

Try using CSS transitions. In CSS, do something like this:

button.continue {
  transition: 5s;
}

Then in JS, you can just set the left/top values:

document.querySelectorAll('button.continue').forEach(button => {
  button.style.left = '100px';
  button.style.top = '200px';
});
user_24442100

Tested in Firefox.

document
   .querySelector(".text.thank-you")
   .animate({ opacity: [0, 1] }, { duration: 5000, iterations: 1, easing: "ease-out" })
   .onfinish = (e) => {
        e.target.effect.target.style.opacity = 1;
   };
user_20045320

Take a look at the Web Animation API. Its an experimental feature so Browser Support (mainly Safari) might be an issue for you. Otherwise you can do it the way others have already pointed out.

user_111469520

Try using WebComponents, you can perform any kind of animation using only VanillaJS, there are predefined animations like Animate.css but you can create custom animations by using keyFrames:

<!-- Add Web Animations Polyfill :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations.min.js"></script>

<script type="module" src="https://unpkg.com/@proyecto26/animatable-component@1.0.0/dist/animatable-component/animatable-component.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@proyecto26/animatable-component@1.0.0/dist/animatable-component/animatable-component.js"></script>

<animatable-component
  autoplay
  easing="ease-in-out"
  duration="1200"
  delay="300"
  animation="heartBeat"
  iterations="Infinity"
  style="display: flex;align-self: center;"
>
  <h1>Hello World</h1>
</animatable-component>

For more details check here: https://github.com/proyecto26/animatable-component

user_15328210
Related