javascript - Scrollreveal.js doesn't apply the animations

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Im getting started with scrollreveal.js. But when I'm linking my script with the html file the modifications that I made in the script doesn't apply. I'm always getting the default animation. I tried to put my script in the body and it didn't change anything. Here is my Javascript and HTML code:

ScrollReveal().reveal('.headline',{ origin: 'left' }, { duration: 2000 });

<h1 class="headline">HELLO WORLD</h1> <script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script> <script src="/scroller.js"></script> </body>

You have two issues with your snippet:

You are trying to pass 2 options objects to


    reveal

but it only takes a single one. This means that your line:

ScrollReveal().reveal('.headline', { origin: 'left' }, { duration: 2000 });
should actually be:
ScrollReveal().reveal('.headline', { origin: 'left', duration: 2000 });
If you check out the documentation for the origin option, it states:
You will need a non-zero value assigned to options.distance for options.origin to have any visible impact on your animations.
This means that if you want to use origin, you'll also need to specify a distance which will specify how much the element will move when revealed. This goes with origin because the element will move and be revealed from the direction specified with origin.
I've fixed your snippet and added a distance of 100px so when the h1 is revealed, it comes in 100px from the left.
ScrollReveal().reveal('.headline', { duration: 2000, origin: 'left', distance: '100px' });
<script src="https://unpkg.com/scrollreveal@4.0.7/dist/scrollreveal.js"></script>
<h1 class="headline">Widget, Inc.</h1>
                @Redhood glad to be of help, don't forget to accept this answer if it solved the problem for you so that it maybe help others in the future.
– Robert Corponoi
                Jan 2, 2021 at 22:34
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.