CODEWITHSUNDEEP
javascriptanimation
Diogo Peres
Diogo Peres

Reputation: 1372

Animate element using Javascript vanilla

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>

Upvotes: 4

Views: 12048

Answers (4)

N-ate
N-ate

Reputation: 6943

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;
   };

Upvotes: 4

jdnichollsc
jdnichollsc

Reputation: 1569

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/[email protected]/dist/animatable-component/animatable-component.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@proyecto26/[email protected]/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

Upvotes: 1

MFdesigns
MFdesigns

Reputation: 21

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.

Upvotes: 1

IceMetalPunk
IceMetalPunk

Reputation: 5566

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';
});

Upvotes: 4

Related Questions