How do I apply animations of
on text change

Question

I have a <div>, to display the text. And given animation for the <div>. I want to animate the <div> when change the text. How do I change the css

HTML

  <div id="location-name-container">
         <div id="location-name"></div>
    </div>
    
    document.getElementById('location-name').innerHTML = "Hello"

CSS

#location-name {
    align-self: center;
    width: 540px;
    max-height: 100px;
    color: #FFFFFF;
    -webkit-text-stroke-color: #000000;
    font-size: 42px;
    line-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    animation: fade-in 200ms;   
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }

Click here to access the sample code

You will need JavaScript to look for the change in the content. Add your animation to a class property, then add the class via JavaScript when the change occurs. — Martin, Jun 22 '20 at 13:06
put the animation in a seperate css class and attach the class to the div when text changes , as Martin said :) — Rmaxx, Jun 22 '20 at 13:06
I think you should have a look on this thread to get the event https://stackoverflow.com/questions/15657686/jquery-event-detect-changes-to-the-html-text-of-a-div — D. Schreier, Jun 22 '20 at 13:09
@Vaibhav: - there is event to chane the text. It is working fine. But, I do need to run the animation also. — Vineesh TP, Jun 22 '20 at 13:24
@Rmaxx: It is in separate css class- I just copied the relavent code here. — Vineesh TP, Jun 22 '20 at 13:25
@Rmaxx: here is the sample code, https://gist.github.com/vineeshtp/d54439bf3fc0300deedb36edecdbdacf — Vineesh TP, Jun 22 '20 at 13:58

Nitesh Sharma · Answer 1 · 2020-06-22T14:48:57.487

1

You have to bind a custom event for such a task with your HTML components in js :

 $(document).on('contentchanged', '#location-name', function() {
      alert('woo');
    });

$('#location-name').trigger('contentchanged');

In this example, once your content will update you will see an alert you can replace alert code with your custom code.

 <div id="location-name-container">
      <div id="location-name">India</div>
</div>

Triggering the event:- when below line execute custom event will be a trigger

document.getElementById('location-name').innerHTML = "Hello"

[updated fiddle] https://jsfiddle.net/niteshsharma/wgqc69s8/1/

edited Jun 22 '20 at 14:48

answered Jun 22 '20 at 13:22

Nitesh Sharma

545
3
14

How do I restart my animation. – Vineesh TP Jun 22 '20 at 13:38
give me your running js fiddle as I tried with your CSS it was not not showing anything in HTML – Nitesh Sharma Jun 22 '20 at 13:43
Here the sample code- it changing the text , https://gist.github.com/vineeshtp/d54439bf3fc0300deedb36edecdbdacf – Vineesh TP Jun 22 '20 at 13:52
please have a look [https://jsfiddle.net/d6j3sk0u/1/] (https://jsfiddle.net/d6j3sk0u/1/) it will work whenever your div text change your animation will reset and run again – Nitesh Sharma Jun 22 '20 at 14:02
I used this , https://jsfiddle.net/d6j3sk0u/1/ and chnaged the text using 'setInterval(myFunction, 3000)' but, is not woking. Text is changing but Animation not happening. Here is the code, https://jsfiddle.net/3d2q9vg7/ – Vineesh TP Jun 22 '20 at 14:11
check I updated the fiddle it's working as expected as there was no `myFunction` specified now its working [https://jsfiddle.net/uxtynv0p/](https://jsfiddle.net/uxtynv0p/) – Nitesh Sharma Jun 22 '20 at 14:14
pleaase check this, https://jsfiddle.net/3d2q9vg7/. Thanks. – Vineesh TP Jun 22 '20 at 14:14
please check the updated fiddle in the answer if this what you are expecting then please accept the answer it will motivate to help others. – Nitesh Sharma Jun 22 '20 at 14:48
It is working fine. but, Is there any other way to do this? ie, set the animation for the parent
then animate to all child elements like that, I am new to this so, don't have much idea about this.
– Vineesh TP Jun 23 '20 at 03:51

score 0 · Answer 2 · answered Jun 22 '20 at 13:13

0

You can also use JavaScript to restart the animation right after you change the content. Check out this tutorial: https://css-tricks.com/restart-css-animation/

answered Jun 22 '20 at 13:13

Nathan Cramer

64
3

score 0 · Answer 3 · answered Jun 22 '20 at 15:21

function addText() {
  const elem = document.getElementById('location-name')

  setTimeout(() => {
    elem.innerText = "Hello"
    elem.classList.add('animate-text')
  }, 10);
  
  // REMOVE CLASS & TEXT TO VISUALIZE EFFECT
  elem.innerText = ""
  elem.classList.remove('animate-text')

}

#location-name {
  align-self: center;
  width: 540px;
  max-height: 100px;
  -webkit-text-stroke-color: #000000;
  font-size: 42px;
  line-height: 50px;
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.animate-text {
  animation: fade-in 1s;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }

<div id="location-name-container">
  <div id="location-name"></div>
</div>
<button onclick="addText()">Add text</button>

score 0 · Accepted Answer · answered Jun 23 '20 at 05:15

I got a simple example.

HTML

 <div class="data-container" id="first-container">
   <div id="location-name-container">
        <div id="location-name" class="run-animation">Hello</div>
  </div>
 </div>
 
 <script>
 setInterval(myFunction, 3000)
 var a = 1
 
 
 function myFunction(){
 locationname = document.getElementById('location-name');
 locationname.classList.remove("run-animation");
 void locationname.offsetWidth;
 locationname.classList.add("run-animation");
 
 locationname.innerHTML = "Hello"+a
 
 a++

 }
</script>

CSS

#location-name {

    background:#003344;
    align-self: center;
    width: 540px;
    max-height: 100px;
    color: #FFFFFF;
    -webkit-text-stroke-color: #000000;
    font-size: 42px;
    line-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    
}

.run-animation {
  /* position: relative; */
  animation: fade-in 2s linear;
}

@keyframes fade-in {
   0%{
   color:black;
  }
  30%{
  color:blue;
  }
  80%{
  color:green
  }
 
  
   from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }

Click here to see the original post

How do I apply animations of on text change

4 Answers4

How do I apply animations of
on text change