Issue with adding class when element is in the viewport

Question

I'm using Stick-Kit to keep some images in place while scrolling, and it seems to be affecting another script that initiates a CSS animation by adding a class to a div when it enters the viewport. I assume the Sticky-Kit script is 'reseting' the other, as the animation only occurs once when Sticky-Kit is removed. The issue is visible when the animated div gets to the top of the screen. How do I ensure the animation occurs only one time (when it first appears in the viewport)?

http://codepen.io/SeanLindsay1/pen/ZBVyLZ

HTML

<div id="bg">
  <h2 class="header-title"><span>HEADER</span></h2>

  <div id="pic1">
   1
  </div>

  <div id="pic2">
   2
  </div>

  <div id="pic3">
   3
  </div>

</div>

CSS

/* STICKY-KIT */
#bg {
    background-color: white;
    width:100%;
    height:1500px;
    padding:0;
    margin:0;
  font-size:30px
}


#pic1 {
    position:relative;
    width:60% ;
    height:500px;
    background-color:blue;
}

#pic2 {
    position:relative;
    width:60% ;
    height:500px;
    background-color:green;
}

#pic3 {
    position:relative;
    width:60% ;
    height:500px;
    background-color:red;
}

/* HEADER TITLES */

.header-title span {
  display: inline-block;
  position: relative;  
}

.change:after {
  content: " ";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid #bebebe;
  -webkit-animation: extend .1s 1 forwards;
  animation: extend 1s 1 forwards;
  margin-left: 4px;
  top: 1.2em !important;
}


@-webkit-keyframes extend {
  0% {
    width: 0;
  }
  100% {
    width: 200px;
  }
}
@keyframes extend {
  0% {
    width: 0;
  }
  100% {
    width: 200px;
  }
}

jQuery

// Check to see if element is in viewport
function isElementInViewport(elem) {
    var $elem = jQuery(elem);

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = jQuery(scrollElem).scrollTop();
    var viewportBottom = viewportTop + jQuery(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round( $elem.offset().top ) + 200 ;
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}



// Check if it's time to start the animation
function extendLine() {
    var $elem = jQuery('.header-title span').each(function() {

    var $elem = jQuery(this);

    // If the animation has already been started
    if ($elem.hasClass('change')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('change');
    }

    });

}

// Capture scroll events
jQuery(window).scroll(function(){
    extendLine();
});

$("#bg").stick_in_parent();
$("#text").stick_in_parent({offset_top: 390});
$("#pic1").stick_in_parent();
$("#pic2").stick_in_parent();
$("#pic3").stick_in_parent();

Answer 1

Removing this line of code:

$("#bg").stick_in_parent();

ensures that the header text block is not influenced by Stick-Kit and eliminates the problem of repeated execution of the animation, as shown in this codepen .

I haven't observed any ill effects caused by that change, but I cannot guarantee that there aren't any, since I don't know why this line was in the original code.

Answer 2

If possible, you can use a CSS Transition instead of an Animation. It'll have better browser support, and will work. I can't really find out what's happening in your code, but if you change a couple of lines, it'll work as expected.

Here is a forked codepen: http://codepen.io/ddanielbee/pen/BQbQqj

Here are the specific lines:

.header-title span::after {
  content: " ";
  transition: all 1.5s ease-out;
  width: 0;
}

.header-title span.change::after {

  position: absolute;
  height: 5px;
  border-bottom: 1px solid #bebebe;
  width: 200px;
  margin-left: 4px;
  top: 1.2em !important;
}