Slide In Element When Scrolling Down - slideIn.js

A really small jQuery plugin which makes use of CSS3 animations to make any elements slide in when you scroll down the webpage.

The goal of this plugin is to animate content blocks within the document when they come into view while scrolling down.

How it works:

• Check elements are on the page while scrolling.
• Trigger the slide-in animation on scroll.
• Disable the slide-in animation If the screen is smaller than a specific breakpoint.

See also:

• 10 Best Scroll-triggered Animation Plugins With jQuery And Pure JavaScript

How to use it:

1. Include the necessary stylesheet slidein.css in the header section of your page.

<link rel="stylesheet" href="slidein.css">

2. Add the CSS class js-slidein to the elements.

<div class="js-slidein block"></div>
<div class="js-slidein block"></div>
<div class="js-slidein block"></div>
<div class="js-slidein block"></div>
<div class="js-slidein block"></div>
<div class="js-slidein block"></div>
...

3. Include the JavaScript file slideIn.min.js after jQuery library. That's it.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<script src="slideIn.min.js"></script>

4. Override the screen size at which breakpoint the plugin disable the slide-in animation.

var breakpoint = 840;

5. Config the slide-in animation.

.js-slidein {
  opacity: 0;
  transform: translateY(100px);
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.js-slidein-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

---

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