How to make use of it:

1. To get began, embody the principle JavaScript storyline.js after loading the most recent jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/storyline.js"></script>

2. Initialize the plugin heading in the right direction parts and apply your individual CSS kinds to them as they’re scrolled into or out of the viewport.

<section class="frame1">
  <h1>Example</h1>
  <div class="box">
  </div>
</section>
<section class="frame2">
  <h1>Keep Scrolling</h1>
  <div class="box">
  </div>
</section>
<section class="frame3">
  <h1>Frame 3</h1>
  <div class="box">
  </div>
</section>

// Cache objects
var objectsCache = {
  frame1: $('.frame1 > .box'),
  frame2: $('.frame2 > .box'),
  frame3: $('.frame3 > .box'),
};

// Initialize the plugin
$.storyline({
  frames: {
    '.frame1' : {
      onActive: function(coords, event) {
        objectsCache.frame1.css({
          transform: `scale(${coords.percent.screenPlayed/10 + 0.8})`
        });
      }
    },
    '.frame2' : {
      onActive: function(coords, event){
        objectsCache.frame2.css({
          transform: `rotate(${coords.percent.frameUnCentered}deg) scale(0.8)`
        });
      }
    },
    '.frame4' : {
      onEnter: function() {
        objectsCache.frame4.addClass('active');
      },
      onLeave: function() {
        objectsCache.frame4.removeClass('active');
      }
    },
  }
});

3. Generate a navigation menu to navigate between these frames. Can be both a boolean or an array.

$.storyline({
  frames: {
   // frames here
  },
  buildMenu: ['1', '2', '3', '4', '5', '6'],
  menuSpeed: 3000, // default: 1500
});

4. Enable the event mode.

$.storyline({
  frames: {
   // frames here
  },
  guide: true
});

5. Set the gap between the present body and the highest of the web page.

$.storyline({
  frames: {
   // frames here
  },
  frameTop: 20
});

6. Determine whether or not to disregard warnings.

$.storyline({
  frames: {
   // frames here
  },
  ignoreWarnings: false
});

7. Set the body tolerance. Can be used to set off the onEnter and onLeave actions extra loosely.

$.storyline({
  frames: {
   // frames here
  },
  tolerance: 50
});

Animate Elements As They Cross Into The Viewport, Storyline Plugin/Github, start animation when div is visible, jquery animate when scroll into view, animate on scroll jquery

See Demo And Download