The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HTML - Simple Animation Problem
JoeJoeJoe
post Feb 1 2023, 11:31 AM
Post #1





Group: Members
Posts: 3
Joined: 31-January 23
Member No.: 28,779



Hello everyone!

I'm trying to make an animation to illustrate the communication between electronic cards.
I am developing a Bluetooth website using React.

The overall idea in a nutshell:
When I receive a notification, I trigger an animation.
This animation is simply several circles that move with a delay to the electronic card.
Once arrived at the chart the points disappear and are replaced in the center of the page (their starting point).
And I have to be able to make this animation every time I call a javascript function, and that as many times as I want.

I get there overall but it's not very pretty. Indeed the animation starts well, but the last points do not have time to finish their movement, and they loop back.

I must not be using the right methods surely...

Here is my HTML code:


CODE

<div class="container-router-demo">

      <div class="points inactive">
        <div class="light-group">
          <div class="points light" id="light1" style={{'--order': 1}}></div>
          <div class="points light" id="light2" style={{'--order': 3}}></div>
          <div class="points light" id="light3" style={{'--order': 5}}></div>
          <div class="points light" id="light4" style={{'--order': 7}}></div>

        </div>
        <div class="dark-group">
          <div class="points dark" id="dark1" style={{'--order': 2}}></div>
          <div class="points dark" id="dark2" style={{'--order': 4}}></div>
          <div class="points dark" id="dark3" style={{'--order': 6}}></div>
          <div class="points dark" id="dark4" style={{'--order': 8}}></div>
  
        </div>
      </div>


CSS :

CODE

.points {
    width: var(--pointSize);
    height: var(--pointSize);
    border-radius: 25px;
    position: absolute;
    opacity: 1;
    animation-delay: calc(var(--order) * 50ms);
    top: calc((1600px - var(--pointSize))/4);
    left: calc((2600px - var(--pointSize))/4);
}

.points.inactive {
    animation-play-state: paused;
}

.points.active {
    animation: dropIn 1.5s linear;    
    animation-delay: calc(var(--order) * 75ms);
}
    
@keyframes dropIn {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(-450px, -250px);
  }
}



JS :

CODE

  function triggerAnim2() {
    const circles = document.getElementsByClassName("points");
    for (let i = 0; i < circles.length; i++) {
      const circle = circles[i];
      circle.classList.add("active");
      const removeListener = function() {
        circle.classList.remove("inactive");
        circle.removeEventListener("animationend", removeListener);
      };
      circle.addEventListener("animationend", removeListener);
      setTimeout(() => {
        circle.classList.remove("active");
        circle.classList.add("inactive");
      }, 1500);
    }
  }


I tried a lot of different values for the delay and the timeout in the js code. but nothing really works.

If you have any clue or idea, please let me know ! smile.gif

Thank you in advance.

Joe
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 01:05 PM