Animate Elements As They Cross Into The Viewport - Storyline

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:

• 10 Best Scroll-triggered Animation Plugins With JavaScript

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:

2022-01-10

• JS Update

2022-01-02

• Improved menu performance

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 markjivko. For more Advanced Usages, please check the demo page or visit the official website.