Problem arising from animation not commencing at expected starting point

Question

Problem arising from animation not commencing at expected starting point

Creating a feature on an app that involves breathing exercises using CSS animations. The challenge I'm facing is ensuring the words "exhale" and "inhale" appear synchronously with the animation of a circle shrinking and enlarging. However, the animation doesn't always start from the same point, causing display issues.

function toggleDropdown() {
  var dropdownContent = document.getElementById("dropdown-content");
  dropdownContent.classList.toggle("show");
}

var timer;

// More JavaScript code...

body {
  background: #005eb8;
  margin: 0;
  padding: 0;
  // More CSS styles...
}

<div class="container">
  <h1>Breathing Exercises</h1>
  
  // More HTML code...
  
</div>

Despite trying various approaches to resetting the animation for each exercise selection, I have not yet found a successful solution.

javascript html css animation

Answer 1

Answer №1

To achieve this effect, you can use CSS transitions along with manipulating a custom property for the transition time duration and adding or removing classes dynamically.

Answer 2

To achieve this effect, you can use CSS transitions along with manipulating a custom property for the transition time duration and adding or removing classes dynamically.

Answer 3

Answer №2

One approach would be to utilize the animationiteration event and update your text content accordingly.

const circle = document.querySelector(".circle");

const inhale = () => {
  circle.innerHTML = "Inhale";
};
const exhale = () => {
  circle.innerHTML = "Exhale";
};

const animate = () => {
  inhale();
  circle.style.animationPlayState = "running";
  circle.addEventListener("animationiteration", (ev) => {
    if (ev.elapsedTime %4 === 0) {
      inhale();
    } else {
      exhale();
    }
  }, false);
};

document.getElementById('animate').addEventListener('click', animate);

.circle-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
}

.circle {
  width: 200px;
  height: 200px;
  background-color: #4BC0C0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  animation-name: breathe;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 2s;
  animation-play-state: paused;
  animation-fill-mode: forwards;
  margin-bottom: 5px;
}

.circle span {
  margin: 33% auto;
  display: inline-block;
  visibility: hidden;
}

@keyframes breathe {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.25);
  }
}

<div class="circle-wrapper">

    <div class="circle"></div>

</div>


<button id="animate">animate</button>

Answer 4

One approach would be to utilize the animationiteration event and update your text content accordingly.

const circle = document.querySelector(".circle");

const inhale = () => {
  circle.innerHTML = "Inhale";
};
const exhale = () => {
  circle.innerHTML = "Exhale";
};

const animate = () => {
  inhale();
  circle.style.animationPlayState = "running";
  circle.addEventListener("animationiteration", (ev) => {
    if (ev.elapsedTime %4 === 0) {
      inhale();
    } else {
      exhale();
    }
  }, false);
};

document.getElementById('animate').addEventListener('click', animate);

.circle-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
}

.circle {
  width: 200px;
  height: 200px;
  background-color: #4BC0C0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  animation-name: breathe;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 2s;
  animation-play-state: paused;
  animation-fill-mode: forwards;
  margin-bottom: 5px;
}

.circle span {
  margin: 33% auto;
  display: inline-block;
  visibility: hidden;
}

@keyframes breathe {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.25);
  }
}

<div class="circle-wrapper">

    <div class="circle"></div>

</div>


<button id="animate">animate</button>

Problem arising from animation not commencing at expected starting point

Answer №1

Answer №2

Similar questions

The printing code is not able to interpret the CSS

Having trouble dynamically adding elements to the Semantic-UI Accordion component

What is the reason for the additional line being generated?

Is the callback still triggered even after the off function is called?

AngularJS SmartyUI position not dynamically updating on SmartyStreets plugin

When using Jest, it is not possible to match 'undefined' using 'expect.any(Object)' or 'expect.anything()'

Does Node.js support backward compatibility?

There was an error in the syntax: JSON parsing error, an unrecognized token '<'

Perform simple arithmetic operations between a number and a string using Angular within an HTML context

Enhance user interactivity by incorporating dynamic checkboxes, radio buttons, checkbox groups, and radio button groups using Ext

Invoke a function within the redux reducer

Creating HTML content in a new window with Vue.js - a step by step guide

Adding jQuery and other libraries to Typescript for optimal functionality

PHP - Issue with AJAX Login Functionality

Is there a way to access the content of a drop-down menu in JavaScript besides using ".value"?

The error message "TypeError: (0, _style.default) is not a function" occurred when using jest along with material

What is the optimal arrangement for constructors or classes in JavaScript code?

Insert some text into the div element. Create a new line

Leverage socket.io in various routes within a node.js application

Stop the upload progress in Angular 6 by unsubscribing from the upload observable, without halting the actual