What is the best way to create a JavaScript animation for altering the width of a div element?

Question

What is the best way to create a JavaScript animation for altering the width of a div element?

Need help with creating a dynamic poll chart based on YES and NO votes? Check out this project where you can visually see the results by clicking HERE.

Looking to add some animation effects to your poll? You can achieve a smooth transition using CSS with transition: width 100ms linear;. Take a look at the sample code below:

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
        .poll{
            height: 50px;
            width: 300px;
            background-color: black;
            transition: all 300ms;
        }
        .poll:hover{
            width: 500px;
        }
    </style>
</head>
<body>
    <div class="poll"></div>
</body>
</html>

If you're having trouble implementing similar transitions in your own divs, check out the function below:

function renderPoll(){
container.innerHTML=''; //reset container
let poll1 = document.createElement('div');
let poll2 = document.createElement('div');

poll1.classList.add('poll-attr');
poll2.classList.add('poll-attr');

let innerTextPoll = Math.round(calcPerc()); 
poll1.style.width = calcPerc() + '%';
poll2.style.width = 100-calcPerc() + '%';

poll1.innerText = innerTextPoll + '%';
poll2.innerText = 100-innerTextPoll + '%';

container.appendChild(poll1);
container.appendChild(poll2);

}

Seeking assistance to make your poll animations stand out? Let me know your thoughts!

javascript html css animation

Answer 1

Answer №1

Expanding on your code and incorporating @Noel Maróti's insight, it is important to remember to set an interval for animating the polls once they have been added to the container.

function renderPoll() {
  container.innerHTML = ''; //clear the container
  let poll1 = document.createElement('div');
  let poll2 = document.createElement('div');

  poll1.classList.add('poll-attr');
  poll2.classList.add('poll-attr');

  let innerTextPoll = Math.round(calcPerc()); //calcPerc() calculates the percentage of YES 
  poll1.innerText = innerTextPoll + '%';
  poll2.innerText = 100 - innerTextPoll + '%';

  container.appendChild(poll1);
  container.appendChild(poll2);

  var target_length = 300;

  animatePoll(poll1, 0, (calcPerc()) * target_length / 100);
  animatePoll(poll2, 0, (100 - calcPerc()) * target_length / 100);

}

function calcPerc() {
  return 75;
}

function animatePoll(elem, from, to) {
  let id = null;
  let width = from || 0;
  var speed = 2.5;
  requestAnimationFrame(frame);

  function frame() {
    if (width < to) {
      width += speed;
      elem.style.width = width + "px";
      requestAnimationFrame(frame);
    }
  }
}


renderPoll();

.poll-attr {
  border: 1px solid blue;
  height: 50px;
  background: lightyellow;
}

.poll {
  height: 50px;
  width: 300px;
  background-color: black;
  transition: all 300ms;
}

.poll:hover {
  width: 500px;
}

<div class="poll"></div>
<div id="container"></div>

Answer 2

Expanding on your code and incorporating @Noel Maróti's insight, it is important to remember to set an interval for animating the polls once they have been added to the container.

function renderPoll() {
  container.innerHTML = ''; //clear the container
  let poll1 = document.createElement('div');
  let poll2 = document.createElement('div');

  poll1.classList.add('poll-attr');
  poll2.classList.add('poll-attr');

  let innerTextPoll = Math.round(calcPerc()); //calcPerc() calculates the percentage of YES 
  poll1.innerText = innerTextPoll + '%';
  poll2.innerText = 100 - innerTextPoll + '%';

  container.appendChild(poll1);
  container.appendChild(poll2);

  var target_length = 300;

  animatePoll(poll1, 0, (calcPerc()) * target_length / 100);
  animatePoll(poll2, 0, (100 - calcPerc()) * target_length / 100);

}

function calcPerc() {
  return 75;
}

function animatePoll(elem, from, to) {
  let id = null;
  let width = from || 0;
  var speed = 2.5;
  requestAnimationFrame(frame);

  function frame() {
    if (width < to) {
      width += speed;
      elem.style.width = width + "px";
      requestAnimationFrame(frame);
    }
  }
}


renderPoll();

.poll-attr {
  border: 1px solid blue;
  height: 50px;
  background: lightyellow;
}

.poll {
  height: 50px;
  width: 300px;
  background-color: black;
  transition: all 300ms;
}

.poll:hover {
  width: 500px;
}

<div class="poll"></div>
<div id="container"></div>

Answer 3

Answer №2

Here is a simple way to achieve it:

function animateWidth() {
  let id = null;
  const element = document.querySelector(".poll");   
  let width = 300; // initial width
  clearInterval(id);
  id = setInterval(changeWidth, 5); // adjust the number for different animation speed
  function changeWidth() {
    if (width == 500) { // stop animation at 500px width
      clearInterval(id); // stop animation
    } else {
      width++; 
      element.style.width = width + "px"; 
    }
  }
}

Answer 4

Here is a simple way to achieve it:

function animateWidth() {
  let id = null;
  const element = document.querySelector(".poll");   
  let width = 300; // initial width
  clearInterval(id);
  id = setInterval(changeWidth, 5); // adjust the number for different animation speed
  function changeWidth() {
    if (width == 500) { // stop animation at 500px width
      clearInterval(id); // stop animation
    } else {
      width++; 
      element.style.width = width + "px"; 
    }
  }
}

What is the best way to create a JavaScript animation for altering the width of a div element?

Answer №1

Answer №2

Similar questions

Touchwipe incorporation - single-page website script

Centering a button within a table-cell through movement

Signaling an Event from a module in the node_modules directory to the Vue application

When a user taps on a link or anchor within a specific webpage on an iPhone, the font size will automatically increase

The current HTML scraping results are showing a variation in numbers

Guide on merging all Vue js functions into a single js file?

Passing arguments from the command line to an npm script

Invoking a shared controller function in AngularJS from a separate controller

Attempting to position a centrally aligned div block containing images towards the left side

Include characteristics in JSX.Element following its declaration

Intrusive JQuery Code Incorporating Itself into SharePoint 2010's HTML Markup

What steps can be taken to modify the style of a single button belonging to a broader group of elements?

Ways to avoid Next.js from creating a singleton class/object multiple times

The layout of my website is perfect when my laptop's zoom is set to 90%, but at 100% it starts overflowing

Tips for optimizing AngularJS performance with large scopes

What steps can I take to allow a third-party JavaScript to access my TypeScript object?

Programmatically link validation rules to form fields

Having trouble with the jQuery slideUp function?

Issues arise with the functionality of Zurb Foundation 5 tabs

Is it possible to establish a connection between React and a MySQL Database?