Tyler Potts Tyler Potts - 5 months ago 10
Javascript Question

I can't get my animation to work on load of my website using jquery

So the problem I am having is that I can't seem to get my jQuery Function to add a class to start my animation? I have tried a lot of different ways to get it to work, none of them are working!


jQuery

$(document).ready(function(){
window.onload = function render(){
$('.title .sub-title').addClass('render');
}
});




CSS

.render {
animation-name: render;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}

@keyframes render {
0% { transform: translateX(-800px); }
100% { transform: translateX( 0px ); }
}




HTML

<div class="site-header-title-wrapper">
<h1 class="title">Template 1</h1><!--Need To add animation
<h4 class="sub-title">- Here is a Template Slogan -</h4><!--Need To add animation to-->
</div>


Please can someone help?

It would be very beneficial!

Answer

Try the following:

$(document).ready(function(){
  $('.title, .sub-title').addClass('render');
});

The code in your example is targeting a .sub-title element nested within a .title element. Including a comma in your CSS selector should fix this.