Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
org.webjars.bower:angular-scroll-animate
Advanced tools
An Angular.js directive which allows you to perform any javascript actions (in the controller, or on the element) when an element is scrolled into or out of, the users viewport, without requiring any other dependencies.
ngAnimate
is great if you want animations based on showing or hiding elements based on some behaviour, but what if you want to trigger behaviour when an element is scrolled into, or out of the user's view?
The goal of this directive is to be small and focused around behaviour that changes when scrolled in and out of view, without requiring jQuery. You can add / remove CSS classes in the callbacks, or execute any arbitrary javascript you want such as pre-loading of data, images or anything else.
bower install angular-scroll-animate --save
angular-scroll-animate.js
in your app:<script src="bower_components/angular-scroll-animate/dist/angular-scroll-animate.js"></script>
angular-scroll-animate
as a new module dependency in your angular app.var myapp = angular.module('myapp', ['angular-scroll-animate']);
.not-visible {
visibility: hidden;
}
Add this to the elements class if you want it to be hidden initially when out of a user's view,
and remove it on the animateElementIn
callback and add it back on animateElementOut
callback.
Example markup:
<!-- angular view -->
<div ng-repeat="car in cars"
when-visible="animateElementIn"
when-not-visible="animateElementOut" class="hidden car">
...
</div>
// controller
$scope.cars = [ ... ];
$scope.animateElementIn = function($el) {
$el.removeClass('hidden');
$el.addClass('animated fadeInUp'); // this example leverages animate.css classes
};
$scope.animateElementOut = function($el) {
$el.addClass('hidden');
$el.removeClass('animated fadeInUp'); // this example leverages animate.css classes
};
when-visible($el)
: [required] function (executed in the controller scope) which is called when the element
is scrolled into view.
when-not-visible($el)
: [optional] function (executed in the controller scope) which is called when the element is
moved out of view via scrolling.
delay-percent="0.50"
: [optional] decimal value which represents how much of the element should be in the users viewport before triggering the bound callback. 0.25
is set as a default, a lower value will make it more eager, a higher value will make it lazier.
bind-scroll-to=".classname"
: [optional] If you are using overflow: auto
in a container and the elements are not appearing when they should set replace classname
with the class you have applied overflow: auto
to.
To ensure fast CSS3 transition rules are used for animations, I recommend either velocity.js or animate.css which come with many pre-built and tested CSS animation classes.
Default event bindings are on scroll
resize
and orientationchange
of the document
element this directive is loaded in.
git clone git@github.com:rpocklin/angular-scroll-animate.git
npm install
bower install
grunt serve
http://localhost:9000/example/
in your browser to see the example.git checkout -b my-new-feature
)grunt beautify
)grunt
)git commit -am 'Added some feature'
)git push origin my-new-feature
).hidden
class in example to .not-visible
to avoid CSS clashes.bind-scroll-to
to bind scroll events to custom parents - see #3).requestAnimationFrame
for performance reasons.when-not-visible
so it is truely optional (thanks @jagged3dge)Number.isNaN
to use !angular.isNumber
instead (original function not available in all browsers yet) (see #2).when-not-visible
attributes and updated NG Docs (see #1).Released under the MIT License. See the LICENSE file for further details.
FAQs
WebJar for angular-scroll-animate
We found that org.webjars.bower:angular-scroll-animate demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.