Animate elements inside cycle slideshow

Question

I am using the Cycle2 slideshow. I am trying to get the h2 tag to slide in after slide fades in.

I tried using the .cycle-slide-active class and animating it using css. That worked except right before the slide changes the h2 slides back out. I would like the h2 to just fade out when the slide transitions. You can also see where I tried to animate the slide using jquery. The animation works for the first slide, but not for the next slides. I know that somehow I need to put the code that animates the h2 tag within a function. I am just not sure how to do this??

Here is my code:

<style>

.slide{position:relative}
.slide_inner{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
.slide_content{
  width:100%;
  box-sizing: border-box;
  padding-left:15px;
  padding-right:15px;
}
.slide_inner h2{
  color:#fff;
  text-shadow:0 0 20px rgba(0,0,0,.8);
  font-size:35px;
  font-weight:700;
  text-transform: capitalize;
  line-height: 1.1em;
  margin-top: 7%;
  transition: all 3s ease;
  margin-left:-120%;
}
/*.cycle-slide.cycle-slide-active .slide_inner h2{margin-left:0;opacity:1;}*/
</style>

<div id="slideshow_section">
  <div 
     class="cycle-slideshow" 
     data-cycle-fx="fadeOut" 
     data-cycle-slides=">div.slide" 
     data-cycle-speed="700" 
     data-cycle-timeout="5500" 
     data-cycle-pager="#custom-pager" 
     data-cycle-pager-template="<a href=#> {{slideNum}} </a>" >


      <div id="slide_1" class="image_1 slide ">
          <a href="/completed-projects/">
            <img  src="/img/slideshow/slide_5.jpg"  alt=""/>
            <div class="slide_inner">
              <div class="slide_content">
                <h2>Here is my title</h2>
                <button class="button_slide">See Details</button>
              </div>
            </div>
          </a>
       </div>
       <div id="slide_2" class="image_1 slide ">
          <a href="https://google.com">
            <img  src="/img/slideshow/slide_6.jpg"  alt=""/>
            <img class="display_md_no" src="/img/slideshow/slide_md_6.jpg"  alt=""/>
            <div class="slide_inner">
              <div class="slide_content">
                <h2>Here is my title</h2>
                <button class="button_slide">See Details</button>
              </div>
            </div>
          </a>
       </div>        
    <div id="custom-pager" class=""></div>
  </div>
</div>

<script>
  $(document).ready(function() {
    setTimeout(function(){ 
       $(".slide_inner h2").animate({'margin-left': '0'});
    }, 1900);
    setTimeout(function(){ 
       $(".slide_inner h2").animate({opacity: '1'});
    }, 2000);
  });
</script>