Viewport-triggered Elements Slide In Animations with jQuery

File Size: 346 KB
Views Total: 2631
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Viewport-triggered Elements Slide In Animations with jQuery

A very simple jQuery script that reveals html elements with slide & fade animations as they are scrolled into view.

How to use it:

1. Add html element into your document.

<div id="canvas">
  <div id="top_block">
    <img src="images/meet_team.png" id="meet_team_img">
  <div class="member_box">

    <img src="images/team_1.png" class="member_photo" id="first">
    <span class="member_name" id="1">Joey</span>
    <span class="member_description">Joey is our man man. He works close with the developer team to ensure quality.</span>

    <img src="images/team_2.png" class="member_photo" id="second">
    <span class="member_name" id="2">Karl</span>
    <span class="member_description">Karl is typically half asleep on the job so he is our coffee boy.</span>

    <img src="images/team_3.png" class="member_photo" id="third">
    <span class="member_name" id="3">Bobby</span>
    <span class="member_description">Bobby keeps everything afloat. Bobby can do anything you ask. He enjoys summer nights and fishing.</span>

    <img src="images/team_4.png" class="member_photo" id="fourth">
    <span class="member_name" id="4">Ray</span>
    <span class="member_description">Ray is a spastic maniac who is a great coder, although he much prefers to be not be disturbed.</span>

    <img src="images/team_5.png" class="member_photo" id="fifth">
    <span class="member_name" id="5">Hugh</span>
    <span class="member_description">Hugh is our customer consultant and takes a great amount of pride in incrementing his street credit.</span>

    <img src="images/team_6.png" class="member_photo" id="sixth">
    <span class="member_name" id="6">Elon</span>
    <span class="member_description">Elon lives to draw, paint and design. So he is our wonderful chef.</span>



2. Load the needed jQuery JavaScript library in the document.

<script src="//"></script>

3. Defining our variables in the root of the code and updating those variables every time we scroll.

var windowHeight = $(window).height();
    var windowScrollPosTop = $(window).scrollTop();
    var windowScrollPosBot = windowHeight + windowScrollPosTop;

    if ($(window).height() > 510) {
      $("#top_block").css("height", $(window).height());

4. The core jQuery method.

$.fn.revealOnScroll = function(direction) {
  return this.each(function() {

    var objectOffset = $(this).offset();
    var objectOffsetTop =;

    if (!$(this).hasClass('hidden')) {
      if (direction == "right") {
          "opacity" : 0,
          "right"   :"400px"
      } else {
          "opacity" : 0,
          "right"   :"-400px"

    if (!$(this).hasClass("animation-complete")) {

      if (windowScrollPosBot > objectOffsetTop) {
          "opacity" : 1,
          "right"   : 0},


4. Reveal the elements on scroll.

$(window).scroll(function() {
  windowHeight = $(window).height();
  windowScrollPosTop = $(window).scrollTop();
  windowScrollPosBot = windowHeight + windowScrollPosTop;




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