Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to run animation on same element but with different text ? #873

Open
woshichuanqilz opened this issue Dec 6, 2023 · 3 comments
Open

Comments

@woshichuanqilz
Copy link

I add a animation on an element (lets say) with text 'apple' make the 'apple' fly to the center of the screen. Now I want to make the animation again but with text 'banana'. So My code is

// animation for apple
element.innerText = 'banana'
// animation for banana

But the result is : apple animation not shown, just banana animation. So what is the issue here.

  1. What mechanism only make the 'banana' animation shown here.
  2. And how to do it nicely make different text with same animation
  3. I have to create two different elements with same animation but different text or not?
@different55
Copy link

Would need to see some actual code, but my guess is that your problem is that animations are not blocking. They run immediately. So what's actually happening in your code is.

// set up animation for apple
// before the first frame has even happened, change text to banana
element.innerText = 'banana';
// repeat animation, again before the first frame has even happened

@woshichuanqilz
Copy link
Author

Would need to see some actual code, but my guess is that your problem is that animations are not blocking. They run immediately. So what's actually happening in your code is.

// set up animation for apple
// before the first frame has even happened, change text to banana
element.innerText = 'banana';
// repeat animation, again before the first frame has even happened
<h1 class="ml1">
  <span class="text-wrapper">
    <span class="line line1"></span>
    <span class="letters">THURSDAY</span>
    <span class="line line2"></span>
  </span>
</h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script>
function anim1(tl){
  tl.add({
      targets: '.ml1 .letter',
      scale: [0.3,2],
      opacity: [0,0.5],
      translateZ: 0,
      easing: "easeOutExpo",
      duration: 600,
      delay: (el, i) => 70 * (i+1)
    });
  tl.add({
      targets: '.ml1 .letter',
      opacity: [0.5,0],
      translateZ: 0,
      easing: "easeOutExpo",
      duration: 600,
      delay: (el, i) => 70 * (i+1)
    }); 
}

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

var tl = anime.timeline()
anim1(tl);
textWrapper.innerHTML = 'banana';
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anim1(tl);
</script>

here is the code, just see the animation on banana, the 'apple' just blank

@different55
Copy link

different55 commented Dec 7, 2023

Yep, what I mentioned before is the problem. Animations do not "block," they don't wait to finish before moving on. So your code is doing this:

  1. Wrap every letter in a span
  2. Animates the spans
  3. Before the animation even starts, immediately throw out all the spans and overwrite with "banana," breaking the first animation
  4. Make new spans for "banana"
  5. Animate the new spans

You need to tell your code to wait for the animation to finish before moving on. Anime.js supports either promises or callbacks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants