Breaking News: Grepper is joining You.com. Read the official announcement!

javascript animation examples

Wrong Wolverine answered on January 2, 2023 Popularity 9/10 Helpfulness 2/10

answer javascript animation examples

javascript animation examples

Comment

1. Fade in and Fade Out

function fadeIn(element) {
  element.style.opacity = 0;
  let last = +new Date();
  let tick = function() {
    element.style.opacity = +element.style.opacity + (new Date() - last) / 400;
    last = +new Date();
    if (+element.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };
  tick();
}

function fadeOut(element) {
  element.style.opacity = 1;
  let last = +new Date();
  let tick = function() {
    element.style.opacity = +element.style.opacity - (new Date() - last) / 400;
    last = +new Date();
    if (+element.style.opacity > 0) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };
  tick();
}

let element = document.getElementById("myElement");
fadeOut(element); // fade out the element
fadeIn(element); // fade in the element

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: animation javascript

Link to this answer
Share Copy Link

Contributed on Jan 02 2023

Wrong Wolverine

0 Answers Avg Quality 2/10

javascript animation examples

Contents

More Related Answers

javascript animation examples

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.