tserkov / vue-scroll-reveal

A Vue directive to wrap @jlmake's excellent ScrollReveal library.

vue-scroll-reveal's Issues

Vue.$sr returns $sr is undefined in browser

As described in the readme I've installed and initiated vue-scroll-reveal as follows

import Vue from 'vue';
import VueScrollReveal from 'vue-scroll-reveal';
Vue.use(VueScrollReveal,{
  duration: 1500,
  delay: 50,
});

And I tried to execute

Vue.$sr.reveal(".bottomReveal", {
  origin: "bottom"
})
.reveal(".leftReveal", {
    origin: "left"
})
.reveal(".rightReveal", {
    origin: "right"
})
.reveal(".topReveal", {
    origin: "top"
});

But it in the browser it says TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default.$sr is undefined

What i have done wrong. How to use the exposed reveal function. I am using [email protected]. I am new to both vue and vue-scroll-reveal

Nuxt 3 directive error

Hello,

I tried to install this plugin in my Nuxt 3 (rc3) app. I registered the plugin as scroll-reveal.client.ts and added v-scroll-reveal to my html element, but get a Vue warning:

"Failed to resolve directive: scroll-reveal [nitro] [dev] [unhandledRejecton] TypeError: Cannot read properties of undefined (reading 'getSSRProps')"

Is this plugin not yet "adapted" to the new nitro engine or am I doing something wrong?

Thanks for your help,
Simon

---

Plugin:

// /plugins/scroll-reveal.client.ts

import VueScrollReveal from 'vue-scroll-reveal'

export default defineNuxtPlugin(nuxtApp => {
	nuxtApp.vueApp.use(VueScrollReveal)
})

Component:
<h1 v-scroll-reveal>Meet the Team.</h1>

Sometimes not working

It seems that when scrolling is not smooth, all content on the page will already be visible when you scroll down to it. If I scroll down a page, it might work fine initially, but then the bug is triggered, and all the remaining elements become visible.

Usually this is only triggered when I scroll very fast. When my CPU is fired up, it happens much more frequently due to scrolling being a bit laggy. Turning on my mouse's mode that makes the scroll wheel move in "steps" also makes it happen more often.

I'm on macOS, and I've been able to reproduce it on Chrome and Opera. I haven't been able to do it on Firefox or Safari, but I suspect it's because scrolling on those was less laggy.

vue-scroll-reveal not working

I imported the library into my project but when I activated the library using Vue.use I got this error "Uncaught TypeError: undefined is not a non-null object"

I didn't do any configuration I just activated the library and got this error.

my code:

import { createApp } from 'vue';
import App from './App.vue'

import VueScrollReveal from 'vue-scroll-reveal';

let myApp = createApp(App);
myApp.use(VueScrollReveal);
myApp.mount('#app');

How do we achieve "sr.clean('target')" or sr.destroy(') with vue-scroll-reveal?

Unable to call other SR api methods.

Possible to Pass Multiple Options via v attribute?

Is there a way to add multiple options via the v-scroll-reveal attribute?

I've tried the following but it only accepts a single value set, unless there is something I should change with my syntax?

v-scroll-reveal={delay:500, distance:0}

Thanks!

How do we achieve "sr.reveal('.box', 50)" with vue-scroll-reveal

Thank you for this vue plugin...

How do we achieve "sr.reveal('.box', 50)" with vue-scroll-reveal
I see in your example you apply it to each elements.
But if I want to specify severals classes or elements at once, like ".box" like the one in scrollrevealjs example, How do I get that?

How can I change the default options?

On ScrollReveal jQuery I would do like this:

// Changing the defaults
window.sr = ScrollReveal({ reset: true });

Thanks!

SSR with Nuxt

The docs say:

"If using as a plugin with Nuxt be sure to disable server side rendering in nuxt.config.js."

Will this mean that all content which is wrapped with v-scroll-reveal will not be server side rendered?

createScrollRevealDirective is not a function

Hello,

I don't know if I configured something wrong or if it's really having problems, I tried with the default settings and with the custom settings and both give an error.

---

error:

component:

<h1 v-scroll-reveal>
...
</h1>

scrollReveal.client.ts:

import { createScrollRevealDirective } from 'vue-scroll-reveal';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('scroll-reveal', createScrollRevealDirective({
        delay: 1000,
        duration: 150,
        reset: true,
    }));
});

nuxt.config.ts

export default defineNuxtConfig({
    ssr: false,
    modules: ["@nuxtjs/tailwindcss", "@nuxtjs/color-mode"],
    tailwindcss: {
        cssPath: "~/assets/css/tailwind.css",
        configPath: "tailwind.config.js",
        exposeConfig: false,
        injectPosition: 0,
        viewer: true,
    },
    colorMode: {
        classSuffix: "",
    },
    css: [
        '~/assets/css/global.scss'
    ]
});

Not working on Mobile Devices

Hello there,

I am using this amazing plugin to; obviously; scroll reveal stuff on my website. It works great on the desktop. But have some issues on mobile. When scrolled to the section to be revealed, it's not revealed and the section is blank. However; in the browser emulator, it works like a charm. I don't know where the problem is. I saw this issue #293 and tried to use its answer, that's why you will see the mounted hook added in the setup. But still not working. Can you please help me with my issue? Thank you!

Setup

app.js

import VueScrollReveal from 'vue-scroll-reveal';
Vue.use(VueScrollReveal, {
  container: document.querySelector('body'),
  class: 'v-scroll-reveal',
  duration: 900,
  delay: 500,
  opacity: 0,
  origin: 'bottom',
  viewFactor: 0.3,
  scale: 1,
  distance: '50px',
  mobile: true,
  reset: false
});

Vue Component

...
 <div
  v-scroll-reveal="{ duration: 2000, origin: 'left' }"
  class="pc-four-numbers__number relative text-center"
>
  <img
    class="mx-auto w-full"
    src="/images/home/ninety-thousand.png"
    alt="90,000 image"
    title="90,000 Cardholders"
  >
</div>
...

<script>
  export default {
    mounted() {
      if (this.$sr.isSupported) {
        document
          .querySelectorAll(".pc-four-numbers__number")
          .forEach(function(pcNumber) {
            pcNumber.classList.add("v-scroll-reveal");
          });
        document
          .querySelector(".mobile-apps__mobiles")
          .classList.add("v-scroll-reveal");
      }
    }
  };
</script>

Operating System: Safari iOS, Chrome OS, and Firefox.
Plugin Version: 1.0.11

nuxt config window is not defined

怎么解？

Nuxt 3 `Failed to resolve directive` error

I am using Node.js v18.18.2 and Nuxt.js v3.8.0 and I am getting this error:

[Vue warn]: Failed to resolve directive: scroll-reveal
[nitro] [unhandledRejection] TypeError: Cannot read properties of undefined (reading 'getSSRProps')

Cannot read properties of undefined (reading 'install')

// main.js
import VueScrollReveal from 'vue-scroll-reveal';

Vue.use(VueScrollReveal);

Elements appear only on top on the page.

Fo me, when I add v-scroll-reveal or v-scroll-reveal.reset has no difference because it reacts only once after the page is being loaded and only to elements that initially appear on the screen. When I scroll down to other elements they do not appear. I can keep scrolling to the top and bottom of the page, but all elements who were not on top of the page stay invisible.
Maybe I am doing something wrong, but I could not find a way to fix this. It looks like it does not react to my scroller or screen at all.
In main.js i put:
import VueScrollReveal from 'vue-scroll-reveal';
Vue.use(VueScrollReveal, {
class: 'v-scroll-reveal',
duration: 1000,
scale: 1,
distance: '10px',
mobile: false
});

in package.json I installed dependency:
"vue-scroll-reveal": "^1.0.11",

Elements doesn't appear after route transition

When there is a route transition (I assume this bug happends with every transition) with the tag the child elements doesn't appear, I have to scroll down and up to see them... Is there a possibility to execute the animations after a parent animation?

support typescript???

Advice on how to transpile `Object.assign` usage

Hi @tserkov, thanks for creating this directive, it works a charm!

I'm running into some issues on IE11 due to the use of Object.assign. I was wondering how you would recommend transpiling it? I've not come across this issue before, so I presume other 3rd party packages transpile using Babel/Bublé etc. based on their advertised support? Should I adjust my Babel config to include this package?

Uncaught TypeError: Cannot read property 'bounds' of undefined

Just find this error message in console (Chrome 83).

at ScrollReveal.isElementVisible (scrollreveal.es.js?6e55:987)

Opening the source the line with error is the 987 top: element.geometry.bounds.top + element.geometry.height * viewFactor, in this variable assignement:

var elementBounds = {
  top: element.geometry.bounds.top + element.geometry.height * viewFactor,
  right: element.geometry.bounds.right - element.geometry.width * viewFactor,
  bottom: element.geometry.bounds.bottom - element.geometry.height * viewFactor,
  left: element.geometry.bounds.left + element.geometry.width * viewFactor
};

I'm using a lot of v-scroll-reveal directives so it's difficult find which of them is causing the error.

Available in providing further information

Thanks

When using this plugin, if it is a full-screen large picture, a white screen will appear.

How to keep the element from disappearing before leaving the viewable area, which attribute controls this function

Do you have all the features?

Just wondering how to use all the features that are in the real ScrollReveal plugin?

Doesn't work after installing module (npm install vue-scroll-reveal)

This is the error I get:

ERROR Failed to compile with 1 errors 07:24:54

This dependency was not found:

• scrollreveal in ./node_modules/vue-scroll-reveal/dist/vue-scroll-reveal.js

To install it, you can run: npm install --save scrollreveal

Steps to reproduce:

1. Create vue project (vue init webpack projectname) and follow instructions.
2. Follow ScrollReveal instructions.
3. Get error.

[Request] delay option

I'd love a delay option so I can have a row of elements, each with an incremented delay property so they appear one at a time.

Interval don't works with Nuxt

__webpack_require__ is not a function

I got this error when using with project create by vue-cli 3, before i using with vue-cli 2 it's ok
__webpack_require__(...) is not a function at eval (vue-scroll-reveal.js?4c95:9) at Object../node_modules/vue-scroll-reveal/dist/vue-scroll-reveal.js (app.js:3418) at __webpack_require__ (app.js:768) at fn (app.js:131) at eval (main.js:15) at Module../src/main.js (app.js:4600) at __webpack_require__ (app.js:768) at fn (app.js:131) at Object.0 (app.js:5081) at __webpack_require__ (app.js:768) at app.js:904 at app.js:907

Elements leaving viewport resets to initial position and opacity

When elements leave viewport, the position and opacity are reset back to initialized value, despite having reset option set to false.

Not sure how to keep the styles of the element as it is after its reveal.

Demo Request

Can you provide a demo of the setup with Nuxt.js. I tried adding it to a previous project and the element will not reveal itself (it is there but the opacity is 0) when I add the v-scroll-reveal like so <section id="facts" v-scroll-reveal>...</section>. Am I missing something?

plugins/vue-scroll-reveal.js:

import Vue from 'vue';
import VueScrollReveal from 'vue-scroll-reveal';

Vue.use(VueScrollReveal, {
  reset: true,
  class: 'v-scroll-reveal',
  duration: 500,
  distance: '10px',
  mobile: true
});

nuxt.config.js:

plugins: [
  { src: "~/plugins/vue-scroll-reveal", ssr: false }
],
build: {
  build: ['vue-scroll-reveal']
}

Flash on Safari mobile & Chrome mobile.

I love this wrapper for the great ScrollReveal!

I'm currently using it on the latest iOS and both on Chrome and Safari I am experiencing a flash when scrolling down and the content is revealed.
(my website is swingby.network)

Any ideas how to debug this?

From what it looks like visually I think the opacity is not 0 at the start by accident. I hope it's not webpack related........ But I'm not sure how to debug mobile.

First load not working

Hi,

I don't know if it's only happen for me. But it's seem on the first load of the page it's not working... and if it does, it reveal from top instead of bottom. If I refresh the page then it's working as I setup it in my main.js.

Vue.use(VueScrollReveal, {
	class: 'v-scroll-reveal', // A CSS class applied to elements with the v-scroll-reveal directive; useful for animation overrides.
	distance: '20px',
	duration: 800,
	origin: 'bottom',
	scale: 0.95,
	opacity: 0,
	delay: 10,
	interval: 10000,
	reset: true,
	viewOffset: { top: 133, right: 0, bottom: 0, left: 0 },
});

Any clue what could possibly cause this ?

Thanks.

Dynamically set scroll reveal on certain elements in a loop

Is there a property to dynamically turn the entire scroll reveal on or off?

For example

<div v-for="(a, i) in articles" :key="'article-'+i">
          <Article
              v-scroll-reveal="{ active: openCards.includes(a.id) }"
              :title="a.title"
              :link="a.link"
              :content="a.content"
              :id="a.id"
          />
        </div>
      </div>

I tried this but it didn't work

<div v-for="(a, i) in articles" :key="'article-'+i">
          <Article
              :v-scroll-reveal="openCards.includes(a.id)"
              :title="a.title"
              :link="a.link"
              :content="a.content"
              :id="a.id"
          />
        </div>
      </div>

MIT licensed vue-scroll-reveal depends on a GPL3 library

Why is this licensed as MIT when scrollreveal 4.x has a GPL-3 license? Is that allowed with the V3 revision of the GPL license?

scroll-reveal and pre-reendering

Ok this is less of an issue and more of a question... Does scroll-reveal work with pre-rendering (or sever-side rendering)? I created a simple page that has some scroll-revealed elements. When I pre-render the page using https://github.com/chrisvfritz/prerender-spa-plugin and I scroll down to the elements they are not shown. No errors logged to the console either. Am I missing something and is there any hope to make it work? Thanks in advance for any answer!

how to use with nuxt.js?

Hi,
Thank you for making this library.

However, I can't get this to work with nuxt.js.

If I put the Vue.use part in nuxt.js plugins, as shown here
I get an error saying the export keyword is Invalid token in export default VueScrollReveal;

Thanks

Configure Scroll-Reveal?

Thanks for the excellent library! Is there anyway to change scroll reveal defaults? For example the overall duration?

Cleanup: true not working

I've added cleanup: true in the plugin options setup, however it's not cleaned up after the reveal is done, the styles are still there. Is it not supported in this wrapper or am I doing something wrong?

Running on Nuxt, my plugin file:

import Vue from 'vue'
import VueScrollReveal from 'vue-scroll-reveal';

Vue.use(VueScrollReveal, {
    duration: 600,
    scale: 1,
    distance: '100px',
    delay: 200,
    viewFactor: 0.2,
    cleanup: true,
  });

How it's used in the template:

<div class="w-full mx-auto" v-scroll-reveal>...</div>

How the style persists in the source after the reveal is done:

<div class="w-full mx-auto" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 0.6s cubic-bezier(0.5, 0, 0, 1) 0.2s, transform 0.6s cubic-bezier(0.5, 0, 0, 1) 0.2s;">...</div>

Workaround

I've used the afterReveal callback to hide the applied style manually:

Vue.use(VueScrollReveal, {
    duration: 600,
    scale: 1,
    distance: '100px',
    delay: 200,
    viewFactor: 0.2,
    cleanup: true,
    afterReveal(el) {
      el.style = "";
    },
  });

Elements do not reveal after page has loaded for a second time on gridsome

Hey

This is only happening on the latest version of OSX Safari from my testing, you can view it in action by visiting this website
https://skyfoundry.agency and clicking on the "work with us" button and then clicking home and then visiting the page again.

I am using the following settings with the following directive v-scroll-reveal

VueScrollReveal, {
      duration: 800,
      scale: 1,
      distance: '100px',
      mobile: false,
    }

I have currently integrated it with Gridsome

Any help would be much appreciated.

Regards Matthew