AOS animation not working when changing tabs?

Question

function openCity(evt, cityName) {

  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
   }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click();

body {font-family: Arial;}

/* Style the tab */
.tab {
 overflow: hidden;
 border: 1px solid #ccc;
 background-color: #f1f1f1;
 }

/* Style the buttons inside the tab */
.tab button {
 background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
 font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
<p data-aos="zoom-out-up">In this example, we use JavaScript to "click" on the London button, to open the tab on page load.</p>

<div class="tab">
 <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
 <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
 <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent" data-aos="zoom-in">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
   </div>

<div id="Paris" class="tabcontent" data-aos="fade-down">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent" data-aos="flip-up">
 <h3>Tokyo</h3>
 <p>Tokyo is the capital of Japan.</p>
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
  </body>
</html>

I am trying to learn about AOS animations. The above code is a sample code that I tried to use. During loading the animation worked for the first tab content.Animation didn't work for second and the third tab.Then the animation doesn't work when changing tabs.I am not using any additional library.Any suggestions?

score 0 · Answer 1 · answered Aug 08 '21 at 20:54

AOS animates elements when they enter the viewport during vertical scroll. That's why the first tab is animated on page load and the other element that are hidden don't; even after they become visible. If you want to animated elements after the tab is visible you should look for another library that animates elements based on adding classes, so you can add the appropriate classes programmatically. I can suggest Animate.css

AOS animation not working when changing tabs?

1 Answers1