How to make jQuery/Animate.css animate on my laptop

JavaScript
1

All jQuery lessons and functions work ok in the fCC editor, but I’d like to have a copy of working code offline on my laptop to review later. Since it is not mentioned how jQuery and Animate.css have been imported “under the hood”, in a local html file on my laptop I included them in this way:

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta content="ie=edge" http-equiv="x-ua-compatible" />
            <meta content="width=device-width, initial-scale=1.0" name="viewport" />
            <title>jQuery</title>
            
            <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

            
            <link rel="stylesheet"
                href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
                integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
                crossorigin="anonymous"/>
        
            <link rel="stylesheet"
                href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
                integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
                crossorigin="anonymous"/>
      
            <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

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

        </head>
        <body>

            <script>
                $(document).ready(function() {

               // adding animated bounce and shake classes goes here
                });
            </script>

           <!-- html markup from Bootstrap goes here -->
           </body>
    </html>

Basically all functions and classes that achieve a static result like changing color/properties etc work ok on my laptop (I tried Chrome, Chromium, Mozilla browsers). But adding classes “animated bounce/shake/hindge” do not animate.
I also tried to include jQuery from local path. Maybe Animate.css has not been included correctly? How can I make the “animated” classes work locally on my laptop?

1 Like
2

opening their documentation I see a warning that says

Hey! It seems that you have animations disabled on your OS, turning Animate.css off.
Animate.css supports the prefers-reduced-motion CSS media feature. You can read more about it here.

this could be related on why it’s not working

the other reason could be the version, version 4 that you have imported requires different class names than what the freeCodeCamp curriculum uses as the curriculum uses a previous version

you can try importing the compact version, which doesn’t use the prefix in the classes, like explained here:

or consult the documentation for the proper class names

1 Like
3

If you using Windows 10/11, go to Setting > Accessibility > Visual Effects > Animation Effects [Set To : ON]
Hope it help

4

Your setup looks good, but try adding ‘animate__’ as a prefix to the class names. For example, use ‘animate__bounce’ instead of ‘bounce’. Also, ensure you add both ‘animate__animated’ and the animation class when triggering animations. Example: $(‘#element’).addClass(‘animate__animated animate__bounce’);.