Animate Element Into View Using CSS3 Animations - jQuery anisview.js

anisview.js is a viewport checker jQuery plugin which makes use of CSS3 animations to animate any elements into view when scrolling down or up the webpage.

Awesome CSS3 animations are based on the familiar Animate.css library.

How to use it:

1. Include the minified version of the anisview.js plugin after loading jQuery JavaScript library (slim build).

<script src="https://code.jquery.com/jquery-3.4.0.slim.min.js" 
        integrity="sha384-7WBfQYubrFpye+dGHEeA3fHaTy/wpTFhxdjxqvK04e4orV3z+X4XC4qOX3qnkVC6" 
        crossorigin="anonymous">
</script>
<script src="js/jquery.anisview.min.js"></script>

2. Attach the plugin to the target element on window load/scroll/resize and specify the animation type (view all animations) you want to use. Default: 'fadeInLeft'.

$(function() {
  $(window).on('load scroll resize', function() {
    $('.target').anisview({
      animation: 'jello'
    });
});

3. Set the scroll direction to trigger the animation. Default: 'down'.

$(function() {
  $(window).on('load scroll resize', function() {
    $('.target').anisview({
      animation: 'jello'
      direction: 'both' // or 'up', 'down'
    });
});

4. Determine whether or not to repeat the animation on each scroll. Default: true. Setting to false means that the scroll animation will only be triggered once.

$(function() {
  $(window).on('load scroll resize', function() {
    $('.target').anisview({
      animation: 'jello'
      repeat: false
    });
});

5. Config the animation delay & speed.

$(function() {
  $(window).on('load scroll resize', function() {
    $('.target').anisview({
      delay: '', // delay-2s
      speed: '', // faster
    });
});

Changelog:

2019-05-04

• Added more options

2019-04-29

• Bugfix

---

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