gridsome-scroll-reveal
A Gridsome Vue directive to wrap @jlmakes' excellent ScrollReveal library.
This is forked from the original vue-scroll-reveal library by tserkov with the added support for SSR
The directive exposes reset
, nodesktop
, and nomobile
as modifiers (ie. v-scroll-reveal.reset.nomobile
).
All other options can be passed to Vue.use
or to individual elements as a value (ie. v-scroll-reveal={ delay: 250 }
).
Install
# npmnpm install --save gridsome-scroll-reveal
# yarnyarn add gridsome-scroll-reveal
Use
Remember! Any of the ScrollReveal options can be used!
// In main.js; // Using ScrollReveal's default configurationVue; // OR specifying custom default options for all uses of the directiveVue;
<!-- In a component --> Scroll down! <!-- This section will reveal itself each time it's scrolled into view --> Tada! <!-- Element-specific configuration options can be passed like this --> Slightly late tada!
Methods
As of 1.0.4, the isSupported()
and sync()
methods are exposed via Vue.$sr
or this.$sr
.
As of 1.0.7, the reveal(target, config, interval, sync)
is exposed via Vue.$sr
or this.$sr
, though using the directive
is preferred in order to keep with Vue principles.
License
While the code within this component is MIT-licensed, ScrollReveal is GPL3-licensed, and requires the purchase of a Commercial License if you want to use it in a closed-source project.
For an explanation of why this component is licensed differently, see #15.