Scroll animation not working

Hello everyone,

I’m trying to add scroll animation to my page and have added this to the HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/script.js"</script></script>

I add this to the js file:

/* Animations on scroll */
    $('.js--wp-1').waypoint(function(direction) {
        $('.js--wp-1').addClass('animate__fadeIn');
    }, {
        offset: '50%'
    });

and I added this to the CSS

/*----------------------------------*/
/* Animations*/
/*----------------------------------*/
.js--wp-1 {
    opacity: 0;
}

.js--wp-1 .animate__fadeIn {
    opacity: 1;
}

For some reason, it’s not working.

To target the section in the HTML which I want to animate, I added this:

<aside class="flex-container js--wp-1">

And finally this code in the head section of the HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

Do you see any errors in the console?

Yes, This is the error I see:

Uncaught TypeError: $(…).waypoint is not a function
at script.js:3

Thanks for getting in touch :slight_smile:

This is the entire HTML of the section:

<!-- ======= Scope ======= -->

    <aside class="flex-container js--wp-1">
        <div class="item item-1">
            <img class="notebook" src="images/notebook.png" alt="notebook" />
        </div>

        <div class="item item-2">
            <blockquote>"Sit amet, consectetur adipisicing elit, sed
            do eiusmod tempor incididunt ut labore et dolore magna aliqua.." - Huffington Post Quote</blockquote>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua.</p>

            <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.</br>

            <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua.</br>

            <br><strong><i class="fas fa-check-square"></i>  et dolore magna aliqua
                <br><i class="fas fa-check-square"></i>  et dolore magna aliqua
                <br><i class="fas fa-check-square"></i>  et dolore magna aliqua
                <br><i class="fas fa-check-square"></i>  et dolore magna aliqua
                <br><i class="fas fa-check-square"></i>  et dolore magna aliqua
                <br><i class="fas fa-check-square"></i>  et dolore magna aliqua
                <br><i class="fas fa-check-square"></i>  et dolore magna aliqua
                <br><i class="fas fa-check-square"></i>  et dolore magna aliqua
                <br><i class="fas fa-check-square"></i>  et dolore magna aliqua
                <br><i class="fas fa-check-square"></i>  et dolore magna aliqua
                <br><i class="fas fa-check-square"></i>  et dolore magna aliqua</strong>
            <p />

            <br>Let's Get Started! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
            do eiusmod tempor incididunt ut labore et dolore magna aliqua. </br>
            <br><button class="button">Learn more</button>
        </div>
    </aside>

And this is the relevant CSS:

/*----------------------------------*/
/* Web Development*/
/*----------------------------------*/

.flex-container {
    display: flex;
    justify-content: center;
}

.item-1 {
    margin: 30px;
    padding: 20px;
    width: 520px;
}

.item-2 {
    margin-left: 40px;
    padding: 20px;
    width: 580px;
    color: #333;
}

.item-2 button {
    background-color: #cd0021;
    color: #fff;
    border: none;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: bold;
    margin: 4px 2px 30px 0px;
    cursor: pointer;
}

.item-2 button:hover {
    background-color: #c2131f;
    transform: scale(0.98);
}

.item-2 p {
    margin: 0;
    line-height: 1.5;
    color: #333;
}

.notebook {
    display: block;
    width: 100%;
    min-width: 540px;
    height: auto;
    box-shadow: 0 8px 6px -6px #ccc;
}

blockquote {
    line-height: 1.1;
    font-family: 'Rufina', serif;
    font-size: 2.6rem;
    font-weight: 700;
    color: #111;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
}

It looks like you’re trying to use a method (.waypoint) from a library, but you’ve only included the CSS for that library. You’d have to download the library and include a link to the script in your HTML somewhere above your own script:

<script src="where-your-waypoint-lib-is-located></script>

It’s not taking effect.

This is the CSS part:

Is this the one? http://imakewebthings.com/waypoints/guides/getting-started/

Yes, there is a download link for the library in the very first sentence on that page. You’ll want to download that zip, decide which version of the library you want to use and then include it in your page (they give you an example of how to do that right below the first paragraph).

Where did you find the code you are using? I mean, how is it you are using code for a library, but you do not know what library it is?

  1. You have to use the jQuery version of the library if you want to use jQuery.

https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js

  1. You have to add the animate__animated class to the element as well (for Animate.css).

  2. If you want to fade-in an element you likely want to set the opacity on the element to 0 first.

Example:


BTW, you have text inside the <br> elements, I’m guessing they are supposed to be <p> elements? In any case, you should avoid using the br tag. Make elements block-level elements if you want them to take up the full with, and top/bottom margin for vertical spacing.

Hello,

That’s a very good question. I’m still trying to find a solution.
As for the br tag, yes, I’m trying to force a line break. This is the reason why I’m using it.

But you have this:

<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.</br>

That is not how the <br> tag works, it does not take content, it is an empty element.

oh, this is just a pure formatting issue.

You are using a start and an end tag, even though that isn’t valid syntax.

<br>
...content
</br>

</br> is invalid syntax, it does not have an end tag.

Normally in HTML you just use <br>, and in XHTML you can do <br /> (notice the position of the slash /)

MDN

Tag omission: Must have a start tag, and must not have an end tag. In XHTML documents, write this element as <br />.

1 Like

Hello, If I remove the /br tag it will simply not work.

As for the scroll animation, it did work finally but it is not a nice animation at all.

And it shows errors in the console:

Uncaught Error: Syntax error, unrecognized expression: a[href*=#]:not([href=#])
at Function.se.error (jquery.min.js:2)
at se.tokenize (jquery.min.js:2)
at se.select (jquery.min.js:2)
at Function.se [as find] (jquery.min.js:2)
at S.fn.init.find (jquery.min.js:2)
at new S.fn.init (jquery.min.js:2)
at S (jquery.min.js:2)
at HTMLDocument. (script.js:28)
at e (jquery.min.js:2)
at t (jquery.min.js:2)


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
if you remove this br tag, there will be no spacing between this paragraphs and the paragraph below nad this is not desirable. If you’ve an alternative soultion, please share it.

        <br><strong><i class="fas fa-check-square"></i> dolore magna aliqua
            <br><i class="fas fa-check-square"></i> dolore magna aliqua
            <br><i class="fas fa-check-square"></i> dolore magna aliqua
            <br><i class="fas fa-check-square"></i> Wdolore magna aliqua
            <br><i class="fas fa-check-square"></i> dolore magna aliqua
            <br><i class="fas fa-check-square"></i> dolore magna aliqua
            <br><i class="fas fa-check-square"></i> dolore magna aliqua
            <br><i class="fas fa-check-square"></i> dolore magna aliqua
            <br><i class="fas fa-check-square"></i> dolore magna aliqua
            <br><i class="fas fa-check-square"></i> dolore magna aliqua
            <br><i class="fas fa-check-square"></i> dolore magna aliqua</strong>
        <p />