滚动动画，使航路点向前和向后运行

Question

我正在尝试创建一些可以向前运行然后向后运行的动画。

因此在此示例中-将块移到位置-然后在用户滚动时将块移出位置

北斗星航路点 http://jsfiddle.net/Lfhepta3/7/

在航点上动画 http://jsfiddle.net/Lfhepta3/10/

$(document).ready(function() {

  // hide our element on page load
  $('#element-to-animate').css('opacity', 0);

  $('#element-to-animate').waypoint(function(direction) {
    if (direction === 'down') {
      // reveal our content
      $('#element-to-animate').addClass('fadeInLeft');
      $('#element-to-animate').removeClass('fadeOutLeft');
    } else if (direction === 'up') {
      // hide our content
      $('#element-to-animate').addClass('fadeOutLeft');
      $('#element-to-animate').removeClass('fadeInLeft');
    }

  }, { offset: '50%' });

});

https://spin.atomicobject.com/2015/05/31/scroll-anmiation-css-waypoints/