HTML - Simple Animation Problem |
HTML - Simple Animation Problem |
JoeJoeJoe |
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 ! Thank you in advance. Joe |
Lo-Fi Version | Time is now: 23rd April 2024 - 01:28 AM |