how to make a mavy text animation using javascript-CodePudding

I want to make a wavy text animation why when the script I made the animation doesn't run. I use mark aiming to mark 1 sentence, that's why I don't use span.

// Wrap every letter in a span
var textWrapper2 = document.querySelector(".ml7 .letters2");
textWrapper2.innerHTML = textWrapper2.textContent.replace(/\S/g, "<mark class='letters2'>$&</mark>");

anime
  .timeline({
    loop: true
  })
  .add({
    targets: ".ml7 .letters2",
    translateY: ["1.1em", 0],
    translateZ: 0,
    duration: 750,
    delay: (el, i) => 50 * i,
  })
  .add({
    targets: ".ml7",
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000,
  });

.m17 .letters2 {
  display: inline-block;
  line-height: 1em;
}

<div >
  <h1 >text <mark>wrapper</mark class=letters2> dropDown</h1>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

I want to make an animation in the text that I have marked. Can you help me to correct my wrong script, or additional scripts or new scripts.

CodePudding user response：

Sure, there are a few issues with the script you provided. First, you are using .ml7 as the class for the text wrapper and the individual letters, but in your HTML, the text wrapper has a class of .m17. This means that the script will not be able to find the text wrapper and the animation will not run.

Next, the mark elements you are using are not closed properly in your HTML. Each mark element should have a closing tag, like this:

<h1 >text <mark >wrapper</mark> dropDown</h1>

Finally, the timeline in your script is not being applied to any targets, so the animation will not run. To fix this, you can specify the text wrapper as the target of the timeline, like this:

    anime
  .timeline({
    targets: ".m17",
    loop: true
  })
  .add({
    targets: ".letters2",
    translateY: ["1.1em", 0],
    translateZ: 0,
    duration: 750,
    delay: (el, i) => 50 * i,
  })
  .add({
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000,
  });

This should fix the issues with your script and allow the animation to run. However, keep in mind that you will need to include the necessary CSS styles for the .letters2 class in order for the animation to work properly. I hope this helps!

CodePudding user response：

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p><button onclick="myMove()">Click Me</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

<script>
function myMove() {
  let id = null;
  const elem = document.getElementById("animate");   
  let pos = 0;
  clearInterval(id);
  id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos  ; 
      elem.style.top = pos   "px"; 
      elem.style.left = pos   "px"; 
    }
  }
}
</script>

</body>
</html>