Trigger Velocity animation when scrolling over a div

Question

I have a velocity animation that has to be loaded after scrolling down on a div. The div is not a scrollable div like a list, it's just a normal div. So what I want is something like I have the div displayed on screen and when I scroll down further on the website to load a certain animation. How do I do that? This is the div that when it is scrolled it should load the animation.

  <div id="specialDiv2">
      <div class="ui two column doubling stackable grid container">
          <div class="column ">
              <h1>What</h1>
              <p id="coolParagraph2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="column  ">
              <img id="specialImage2" src="meganOMG.png"/>
          </div>
      </div>
      <div class="ui center aligned container">
          <a id="arrow1" href="#">
              <i class="huge red angle double down icon"></i>
          </a>
      </div>
  </div>

This is the div where I have to apply the animation.

<div id="specialDiv3">
    <div class="ui three column doubling stackable grid container">
        <div class="column columnFade">
            <h1>Benefits</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <i class="massive diamond icon"></i>
        </div>
        <div class="column columnFade">
            <h1>Platform</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <i class="massive diamond icon"></i>
        </div>
        <div class="column columnFade">
            <h1>Vision</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <i class="massive diamond icon"></i>
        </div>
    </div>
    <br>
    <hr width="40%">
    <br>
</div>

score 0 · Answer 1 · answered Jul 04 '17 at 22:57

You could make a function like this:

function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
 }

And use it in your javascript with your div (elem)

Here's a good question and answer that will help you, but it is complicated stuff:

Check if element is visible after scroll

Trigger Velocity animation when scrolling over a div

1 Answers1