Untitled

 avatar
unknown
plain_text
a year ago
1.3 kB
7
Indexable
Javascript

<script>
$(document).ready(function() {
  function runAnimation($tabContent) {
    $tabContent.find('.tab-content_top-heading').css('animation-play-state', 'running');
    $tabContent.find('.tab-content_top-grid').css('animation-play-state', 'running');
  }

  $('.tab-content_top-heading, .tab-content_top-grid').css('animation-play-state', 'paused');

  $('.service_tab-link').on('click', function() {
    setTimeout(function() {
      $('.w-tab-pane').each(function() {
        var $tabPane = $(this);
        if ($tabPane.hasClass('w--current')) {
          runAnimation($tabPane);
        }
      });
    }, 50);
  });
});
</script>

CSS

.tab-content_top-heading {
  -webkit-animation: slideup 0.45 ease backwards;
  animation: slideup 0.45s ease backwards;
  -webkit-animation-delay: 0.0s;
  animation-delay: 0.0s;
}

.tab-content_top-grid {
  -webkit-animation: slideup 0.45 ease backwards;
  animation: slideup 0.45s ease backwards;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

@keyframes slideup {
	from {opacity: 0; transform: translateY(40px);}
  to {opacity: 1; transform: translateY(0px);}
}

@-webkit-keyframes slideup {
	from {opacity: 0; transform: translateY(40px);}
  to {opacity: 1; transform: translateY(0px);}
}
Editor is loading...
Leave a Comment