Run jQuery function on initial page load and scroll

Question

I'm working on a design and I would like make a few blocks "slide in" from the sides when they're in-view of the window. I have it working after following some tutorials online, but it will only work if the elements are not in-view and you scroll down the page to see them. What I would like to do is have the elements also "slide" when the page loads initially. I feel this might be too much code to just post here, so I added everything to a fiddle.

/*Interactivity to determine when an animated element in in view. In view elements trigger our animation*/
$(document).ready(function() {

  //window and animation items
  var animation_elements = $.find('.animation-element');
  var web_window = $(window);

  //check to see if any animation containers are currently in view
  function check_if_in_view() {
    //get current window information
    var window_height = web_window.height();
    var window_top_position = web_window.scrollTop();
    var window_bottom_position = (window_top_position + window_height);

    //iterate through elements to see if its in view
    $.each(animation_elements, function() {

      //get the elements information
      var element = $(this);
      var element_height = $(element).outerHeight();
      var element_top_position = $(element).offset().top;
      var element_bottom_position = (element_top_position + element_height);

      //check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport)
      if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
        element.addClass('in-view');
      } else {
        element.removeClass('in-view');
      }
    });

  }

  //on or scroll, detect elements in view
  $(window).on('scroll resize', function() {
    check_if_in_view()
  })
  //trigger our scroll event on initial load
  $(document).ready('scroll');

});

.container {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.row {
  border-bottom: solid 1px transparent;
  margin-bottom: 2em;
}

.row>* {
  float: left;
}

.row:after,
.row:before {
  content: '';
  display: block;
  clear: both;
  height: 0;
}

.row.uniform>*> :first-child {
  margin-top: 0;
}

.row.uniform>*> :last-child {
  margin-bottom: 0;
}

.wrapper {
  padding: 1em 0em 4em;
}

.profiles {
  margin-bottom: 4em;
  padding-top: 4em;
  background-color: #fff;
  height: 200px;
}

.profile {
  width: 24%;
  height: 100px;
  margin-bottom: 2em;
  margin-right: 2px;
  text-align: center;
  background-color: #666;
  border: 1px solid #000;
  color: black;
}

.animation-element {
  opacity: 0;
  position: relative;
}

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-150px, 0px, 0px);
  -webkit-transform: translate3d(-150px, 0px, 0px);
  -o-transform: translate(-150px, 0px);
  -ms-transform: translate(-150px, 0px);
  transform: translate3d(-150px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}


/*animation element sliding right*/

.animation-element.slide-right {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(150px, 0px, 0px);
  -webkit-transform: translate3d(150px, 0px, 0px);
  -o-transform: translate(150px, 0px);
  -ms-transform: translate(150px, 0px);
  transform: translate3d(150px, 0px, 0px);
}

.animation-element.slide-right.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="wrapper">
  <div class="container">
    <section class="profiles">
      <div class="row">
        <section class="profile animation-element slide-left">
        </section>
        <section class="profile animation-element slide-left">
        </section>
        <section class="profile animation-element slide-right">
        </section>
        <section class="profile animation-element slide-right">
        </section>
      </div>
    </section>
  </div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

The bit of code that I've been playing with is at the bottom of the jquery bit, but nothing I change seems to effect anything.

 //trigger our scroll event on initial load
$(document).ready('scroll');

But I will admit I have very little knowledge of this, and I'm just following tutorials and examples online. On the fiddle, if you scroll down and back up, you'll see the boxes slide into view. What I'm wanting to do is make them slide in on the initial page load and also as you scroll down the page (i'm using the same code on other elements further down the page on the full version).

Thank you to anyone who can help me!

Answer 1

https://api.jquery.com/ready/

Description: Specify a function to execute when the DOM is fully loaded.

You can't just pass in "scroll", as that is not a function. What you can do is call $(window).trigger('scroll') at the end, or do $(document).ready(check_if_in_view), as check_if_in_view is a function.

/*Interactivity to determine when an animated element in in view. In view elements trigger our animation*/
$(document).ready(function() {

  //window and animation items
  var animation_elements = $.find('.animation-element');
  var web_window = $(window);

  //check to see if any animation containers are currently in view
  function check_if_in_view() {
    //get current window information
    var window_height = web_window.height();
    var window_top_position = web_window.scrollTop();
    var window_bottom_position = (window_top_position + window_height);

    //iterate through elements to see if its in view
    $.each(animation_elements, function() {

      //get the elements information
      var element = $(this);
      var element_height = $(element).outerHeight();
      var element_top_position = $(element).offset().top;
      var element_bottom_position = (element_top_position + element_height);

      //check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport)
      if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
        element.addClass('in-view');
      } else {
        element.removeClass('in-view');
      }
    });

  }

  //on or scroll, detect elements in view
  $(window).on('scroll resize', function() {
    check_if_in_view()
  })
  //trigger our scroll event on initial load
  $(window).trigger('scroll');
});

.container {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.row {
  border-bottom: solid 1px transparent;
  margin-bottom: 2em;
}

.row>* {
  float: left;
}

.row:after,
.row:before {
  content: '';
  display: block;
  clear: both;
  height: 0;
}

.row.uniform>*> :first-child {
  margin-top: 0;
}

.row.uniform>*> :last-child {
  margin-bottom: 0;
}

.wrapper {
  padding: 1em 0em 4em;
}

.profiles {
  margin-bottom: 4em;
  padding-top: 4em;
  background-color: #fff;
  height: 200px;
}

.profile {
  width: 24%;
  height: 100px;
  margin-bottom: 2em;
  margin-right: 2px;
  text-align: center;
  background-color: #666;
  border: 1px solid #000;
  color: black;
}

.animation-element {
  opacity: 0;
  position: relative;
}

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-150px, 0px, 0px);
  -webkit-transform: translate3d(-150px, 0px, 0px);
  -o-transform: translate(-150px, 0px);
  -ms-transform: translate(-150px, 0px);
  transform: translate3d(-150px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}


/*animation element sliding right*/

.animation-element.slide-right {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(150px, 0px, 0px);
  -webkit-transform: translate3d(150px, 0px, 0px);
  -o-transform: translate(150px, 0px);
  -ms-transform: translate(150px, 0px);
  transform: translate3d(150px, 0px, 0px);
}

.animation-element.slide-right.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="wrapper">
  <div class="container">
    <section class="profiles">
      <div class="row">
        <section class="profile animation-element slide-left">
        </section>
        <section class="profile animation-element slide-left">
        </section>
        <section class="profile animation-element slide-right">
        </section>
        <section class="profile animation-element slide-right">
        </section>
      </div>
    </section>
  </div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Answer 2

You are almost there... all you need to do is trigger your check_if_in_view function when all the html is ready - that just means passing in the function by name to your last document.ready call. Your snippet works with that one tweak.

---

For some general advice, I wouldn't try to "fake" a scroll event just to trigger other behaviours - it may get confusing with changes later on. What you really want is to run your custom function right after pageload, and jquery will let you do precisely that.

/*Interactivity to determine when an animated element in in view. In view elements trigger our animation*/
$(document).ready(function() {

  //window and animation items
  var animation_elements = $.find('.animation-element');
  var web_window = $(window);

  //check to see if any animation containers are currently in view
  function check_if_in_view() {
    //get current window information
    var window_height = web_window.height();
    var window_top_position = web_window.scrollTop();
    var window_bottom_position = (window_top_position + window_height);

    //iterate through elements to see if its in view
    $.each(animation_elements, function() {

      //get the elements information
      var element = $(this);
      var element_height = $(element).outerHeight();
      var element_top_position = $(element).offset().top;
      var element_bottom_position = (element_top_position + element_height);

      //check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport)
      if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
        element.addClass('in-view');
      } else {
        element.removeClass('in-view');
      }
    });

  }

  //on or scroll, detect elements in view
  $(window).on('scroll resize', function() {
    check_if_in_view()
  })
  //trigger our scroll event on initial load
  $(document).ready(check_if_in_view);

});

.container {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.row {
  border-bottom: solid 1px transparent;
  margin-bottom: 2em;
}

.row>* {
  float: left;
}

.row:after,
.row:before {
  content: '';
  display: block;
  clear: both;
  height: 0;
}

.row.uniform>*> :first-child {
  margin-top: 0;
}

.row.uniform>*> :last-child {
  margin-bottom: 0;
}

.wrapper {
  padding: 1em 0em 4em;
}

.profiles {
  margin-bottom: 4em;
  padding-top: 4em;
  background-color: #fff;
  height: 200px;
}

.profile {
  width: 24%;
  height: 100px;
  margin-bottom: 2em;
  margin-right: 2px;
  text-align: center;
  background-color: #666;
  border: 1px solid #000;
  color: black;
}

.animation-element {
  opacity: 0;
  position: relative;
}

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-150px, 0px, 0px);
  -webkit-transform: translate3d(-150px, 0px, 0px);
  -o-transform: translate(-150px, 0px);
  -ms-transform: translate(-150px, 0px);
  transform: translate3d(-150px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}


/*animation element sliding right*/

.animation-element.slide-right {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(150px, 0px, 0px);
  -webkit-transform: translate3d(150px, 0px, 0px);
  -o-transform: translate(150px, 0px);
  -ms-transform: translate(150px, 0px);
  transform: translate3d(150px, 0px, 0px);
}

.animation-element.slide-right.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="wrapper">
  <div class="container">
    <section class="profiles">
      <div class="row">
        <section class="profile animation-element slide-left">
        </section>
        <section class="profile animation-element slide-left">
        </section>
        <section class="profile animation-element slide-right">
        </section>
        <section class="profile animation-element slide-right">
        </section>
      </div>
    </section>
  </div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Answer 3

Pass your function as a reference to both the event listener and ready()

$(window).on('scroll resize', check_if_in_view);

$(document).ready(check_if_in_view);