Using ScrollReveal with Laravel?

[D4RKAR117]

• Ubuntu 18.04 LTS
• Firefox Quantum v61.0.1 And Opera 54.0.2952
• Scrollreveal v3.4.0 (First Usage try), Now Beta 4.0-beta32

I'm trying to use ScrollReveal v3.4.0 in my Laravel web page, but the animations never start, later I install v4.0.0-beta.32 hoping that will help me, but the animations never start. Idk if im doing anything wrong but I cant find any example of usage with Laravel

that its my custom script, i follow all available documentation.

Here its my custom class implementation for reveals.

and that its my laravel blade page with the CDN (I try importing sr.js and sr.min.js local scripts that can be seen in the previous screenshot, but it always gives the same result and the animations do not start,)

I would appreciate a guide or how to use scrollreveal with laravel, including its implementations of webpack.

Thanks, Ill waiting for your answer!

[jlmakes]

I'm not familiar with Laravel, or how it works with 3rd party libraries/dependencies.

If you're using npm in your project, I'd guess you‘ll want something like:

$ npm i scrollreveal@beta --save

const ScrollReveal = require("scrollreveal");

ScrollReveal().reveal('.top-reveal', { ... });
ScrollReveal().reveal('.right-reveal', { ... });
// etc...

Also, when you're using <script> tags (CDN), are there any errors in the console? It’s possible your script is attempting to use window.ScrollReveal before it has loaded.

[D4RKAR117]

Thanks for responding quickly.

First I want to confirm that Laravel effectively uses npm as a dependency manager, as explained in this link, mix imports of external JS libraries should go in the file /resources/assets/js/app.js, so that later Webpack camn compile and minify the code inside the deployment folder public/js/app.js.

I tried what you suggested earlier by applying your response and the Laravel documentation for the use of external JS libraries as follows:

This is my assets app.js file and as you suggested try adding:

const ScrollReveal = require("scrollreveal"); into the file.

This is my custom script where I applied the other part of your suggestion

and finally, again here is my view where to use both my custom script and the deployment app.js (Remember that in theory when you import a library inside the asset app.js, deployment app.js works like the script of the imported JS library).

I removed the CDN from the view, later in the display of my page look for errors in the console as you suggested, but this error is new, it did not appear when I tried to use the CDN or the local script: ScrollReveal.js or ScrollReveal.min.js

I appreciate your help enormously, I hope you can help me with this problem, and that this could be a contribution for future versions of this incredible JavaScript library.

[jlmakes]

ScrollReveal is not defined when/where you're trying to use it.

Notice how for Vue, you are assigning to the global object, e.g:

// app.js
window.Vue = require('vue');

This makes Vue a global variable. I would guess you either need to do the same for ScrollReveal, e.g:

// app.js
window.ScrollReveal = require('scrollreveal');

...OR require scrollreveal in the same file where you intend to use it, e.g:

// webAni.js
const ScrollReveal = require("scrollreveal");

ScrollReveal().reveal('.top-reveal', { ... });
ScrollReveal().reveal('.right-reveal', { ... });

[D4RKAR117]

ok I just tried your new suggestions as follows:

this is my resources/assets/js/app.js i added

window.ScrollReveal = require('scrollreveal');

first without any another modification, it doesn’t work and the console still trows the undefined error. After that i tried add the Laravel default format to package as shown in the previous screenshot with the require('../../../node_modules/scrollreveal');, it doesn’t affect in anything.

last i tried add to the public/js/webAni.js the line const ScrollReveal = require("scrollreveal"); and then this happen in the console.

another kind of error.

But trying to validate the code using the visual studio code, I found the following regarding the ScrollReveal package.

The translation of the message says:

No declaration file was found for the 'scrollreveal' module. '/home/d4rkar117/GitRepos/DatacenterWeb/node_modules/scrollreveal/dist/scrollreveal.js' has an implicit "any" type.
   Try "npm install @ types / scrollreveal" if it exists or add a new declaration file (.d.ts) that includes "declare module 'scrollreveal';"

that note appears with or without require('../../../node_modules/scrollreveal');, idk if this message has any kind of relevance in this case but ill wait for your comments.

[jlmakes]

You should not be responsible for locating node package file paths, e.g:

require('../../../node_modules/scrollreveal');

you should only need to pass the package name, e.g:

require('scrollreveal');

From the ReferenceError: require is not defined inside webAni.js, it’s clear that you should only be using require() inside of app.js, so I still believe that this is correct:

// app.js
window.ScrollReveal = require('scrollreveal');

Also this...

No declaration file was found for the 'scrollreveal' module... Try npm install @types/scrollreveal if it exists or add a new declaration file (.d.ts) that includes declare module 'scrollreveal';

I don’t think the missing type definitions error message matters, unless you’re using TypeScript.

---

If you’re getting ReferenceError: ScrollReveal is not defined from your webAni.js script, I would guess it’s the order in which your scripts are loaded/executed. This doesn’t appear to be a ScrollReveal problem, but a question of how to get 3rd party scripts working with Laravel.

I did notice however, that you’re using the defer attribute on your app.js script tag.

defer

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded. Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.

— MDN

I'm not sure, but this could be why your webAni.js may be evaluated before the app.js has had a chance to execute. Sounds like you want to wait for the DOMContentLoaded event before attempting to use ScrollReveal (or any of your 3rd party scripts).

I would recommend checking with the Laravel community on script execution order, or exploring the use of DOMContentLoaded event listeners inside your webAni.js file.

[D4RKAR117]

Ok, finally after hours experimenting and thanks to your last suggestion, I successfully managed to set up your wonderful library. I will explain how I did it with the hope that you add this to your documentation and the clarification of my final doubt, after this you can terminate this issue.

First, the defer attribute in the Githubissues.

Githubissues is a development platform for aggregating issues.