Animate Elements As They Cross Into The Viewport - Storyline

Animate Elements As They Cross Into The Viewport - Storyline
File Size: 50.2 KB
Views Total: 297
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Storyline is a scroll-based animation library for jQuery that applies custom CSS styles or classes to elements as they cross into the viewport.

Ideal for storytelling, one page scroll websites, and landing pages.

See Also:

How to use it:

1. To get started, include the main JavaScript storyline.js after loading the latest jQuery library.

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

2. Initialize the plugin on target elements (boxes in this example) and apply your own CSS styles (or classes) 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');
      },
      scrollIntoView: true,
    },
  }
});

3. Generate a navigation menu to navigate between those frames. Can be either a boolean or an array. Optional.

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

4. Enable the development mode. Default: false.

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

5. Set the distance between the current frame and the top of the page. Default: 0.

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

6. Determine whether to ignore warnings. Default: true.

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

7. Set the frame tolerance. Can be used to trigger the onEnter and onLeave actions more loosely. Default: 20.

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

Changelog:

2021-08-10

  • Added scrollIntoView option

2021-08-10

  • Font display fix

2021-08-09

  • Using common jQuery library; added storyline.min.js

2021-08-06

  • Log level now set in configuration object

 


This awesome jQuery plugin is developed by Stephino. For more Advanced Usages, please check the demo page or visit the official website.