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

Choose only one option from the dropdown menu at a time within the specified div

Transform arrays within arrays to objects

Why won't JQuery .ajax send my request?

Display Checkbox Selections in a Popup Message Box

Ways to change the color of a button when it is clicked?

What specific flag should be included in Chrome settings to prevent displaying c:/fakepath?

Tips for resolving jQuery conflict problems

I'm having trouble with class attributes not functioning properly in TypeScript within Angular. What steps can I take to resolve this issue

CSS issue encountered: "Value of property is not valid"

Issue with Jquery addClass method in Firefox

Using Node.js to retrieve a p12 certificate from the certificate repository

Using a percentage in CSS translate can result in an image appearing blurry

Executing a controller method in AngularJS when redirecting a page

Encountering an issue with WebRTC where the 'addIceCandidate' function on RTCPeerConnection is failing, resulting in an error displayed on the console. However, despite this error

Converting HTML content into Java objects

The template in AngularJS route fails to display

Mastering CSS: Optimizing Div Placement Across Sections

The `Target closed` error in Playwright Library is triggered solely by the closing of either the `context` or `browser`

In order to indicate the checkbox as checked, I must ensure that its value is set to

Adjust the width of the table by utilizing the border-collapse property set to collapse