jQuery Animate Visible

Extremely simple jQuery plugin that pauses CSS animations on page load and plays them when the animated element appears in the viewport as a result of page load, scroll, or resize. The CSS animation itself is up to you. For example, you might use the following to have an element fade in:

@keyframes fade-in {     from {         opacity: 0;     }      to {         opacity: 1;     } }  .fade-in {     animation-name: fade-in;     animation-duration: 2s; }

Now you can use Animate Visible to delay the animation until the animated element becomes visible:

$('.fade-in').animateVisible();

By default, the animations will only be delayed and triggered on scroll down. You can also trigger animations on scroll up by setting the up parameter:

$('.fade-in').animateVisible({     up: true });

By default, the animations will be triggered when half the element has scrolled into the viewport. You can change this behaviour using the tolerance parameter:

$('.fade-in').animateVisible({     tolerance: 0.25 });

Whole number values will treated as pixel values; numbers less than one will be treated as proportions of the height of the animated element.

License

Copyright (c) 2019 Castlegate IT. All rights reserved.

This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License along with this program. If not, see https://www.gnu.org/licenses/.