by Fernando Rojo
Menu
Close
animateMePlz is a jQuery plugin by Fernando Rojo.

animateMePlz.js

A simple, lightweight jQuery extension for scrolling animations.

Install Customize

Meet animateMePlz - a lightweight jQuery plugin

animateMePlz lets you animate anything on a website upon scrolling to it. It's incredibly lightweight – only 0.8 kb – while offering dozens of customizations.

Copy and paste a few lines of HTML and you'll have animateMePlz installed in seconds. Thanks to Dan Eden's animate.css, every animation is pure CSS.

Animate when scrolled to

Animate when scrolled to - but only once

Animate when scrolled to - starting 100px early

Animate when scrolled to - delayed by .5 seconds

Animate when scrolled to - delayed by 1 second & starting 100px early

customize animateMePlz

Quick and easy animation customizations, tailored to your design needs.

How to customize animateMePlz

This section is for beginners. Scroll down to defaults if you're familiar with jQuery.

Note: This probably goes without say, but before trying to do any customizations, make sure you've already installed animateMePlz on your website.

The current version of animateMePlz has the following customizations available: animationStyle, animationDelay, repeat, and threshold.

There are two ways to customize animateMePlz options. The first way is to edit the plugin parameters. The second way is to insert an inline customization on an HTML element. I generally recommend the first way, but will show how both are done below.

Method #1: edit animateMePlz with plugin parameters

This is the quickest and most scalable way to customize your plugin. The first thing you have to do is locate the initation script. We inserted it into our HTML in step #2 on the install page. It looks like this. 

<script>
    $(document).ready(function(){
        $(window).scroll(function() {
            $('.animateMePlz').animateMePlz();
        });
    }) 
</script>

We're going to be editing parameters inside of $('.animateMePlz').animateMePlz(). First add the {} squiggles inside the parentheses. Then add the parameter change.

Example #1: say you want to edit the animationStyle for every element that has the '.animateMePlz' class. You want that animationStyle to be 'bounceIn', as found on Dan Eden's website. 

$('.animateMePlz').animateMePlz({
    animationStyle: 'bounceIn'
});

Example #2: What if, in addition to the new animationStyle, we want to change the threshold?

We know that the threshold is an integer value, rather than a string, so it doesn't go in quotes. Don't forget to put a comma after every attribute except the last one. 

$('.animateMePlz').animateMePlz({
    animationStyle: 'bounceIn', // Don't forget to check your commas & quotes
    threshold: 30
});

Method #2: edit animateMePlz with inline HTML attributes

You can achieve the same from example #2 by using inline attributes in your HTML. You would have to do this on every element if you choose this method. 

<div data-animationStylePlz="bounceIn" 
     data-thresholdplz="20">
</div>

Defaults

The code block below shows the default settings specified for the animateMePlz.js plugin. You don't have to change any of the options, but if you want to, this gives you reference on what they are by default. 

  
$('.animateMePlz').animateMePlz({
    threshold: 20,            // integers don't have quotes
    animationStyle: 'fadeIn', // strings do
    repeat: 'repeat',
    animationDelay: '.25s'    // be careful with your commas
});

animationStyle

Format: case-sensitive string

There is an exhaustive list of animation styles available on Dan Eden's animate.css website.

The default animationStyle is 'fadeIn'. You can easily change it to any style that's on Dan's website.

Change in plugin 

$('.animateMePlz').animateMePlz({
    animationStyle: 'bounceIn'
});

Change in inline HTML element 

  <div data-animationStylePlz="bounceIn"></div>

animationDelay

format: string, ending with the letter s to denote seconds

The default animationDelay is '.25s'. This is the equivalent of animation-delay in CSS, so you can apply it either way. If you customize through the plugin, it still has the browser prefixes.

The animationDelay can be combined with the threshold pretty well. I like to have a bit of a positive threshold - which causes the delay to start a certain number of pixels early. Then, if you add an animationDelay, it comes in smoothly.

Change in plugin 

$('.animateMePlz').animateMePlz({
    animationDelay: '.5s'
});

Change in inline HTML element 

  <div data-animationDelayPlz=".5s"></div>

threshold

format: integer, denoting pixels

The default threshold is 20. The number stands for pixels, but do not add 'px'.

The threshold represents the number of pixels that precede the element you want to animate.

For instance, if the threshold is 50, the animation will start 50px before the viewport (user's screen) has reached the '.animateMePlz' element.

Change in plugin 

$('.animateMePlz').animateMePlz({
    threshold: 50
});

Change in inline HTML element 

  <div data-thresholdPlz="50"></div>

repeat

format: string, two options, case-sensitive

repeat defines whether or not the element animates every time someone scrolls to it, or only the first time.

The two options are 'repeat' and 'noRepeat'. The default is set to 'repeat'.

Change in plugin 

$('.animateMePlz').animateMePlz({
    repeat: 'noRepeat'
});

Change in inline HTML element 

  <div data-repeatPlz="noRepeat"></div>

install animateMePlz

Get animateMePlz up and running in under a minute. Hardly any javascript, jQuery or CSS knowledge necessary.

Download

1. Insert jQuery & animateMePlz.js

Once you have downloaded the necessary files, place the animateMePlz.js file right above the closing </body> tag of your HTML file. It should go below jQuery. 


<body>
     ...
     <!-- insert jQuery (you can also download the file and insert it) -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <!-- insert animateMePlz.js into your html -->
     <script src="path/to/animateMePlz.js" type="text/javascript"></script>
</body>

Note: If you don't know what the path/to/ is supposed to be before the animate.js file, simply drag the file into the same folder as your index.html file and leave path/to/ empty.

2. Initiate animateMePlz

Add a script tag below the first two from step #1 that initiates your function. 


<body>
    ...
    <!-- insert jQuery (you can also download the file and insert it) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- insert animateMePlz.js into your html -->
    <script src="path/to/animateMePlz.js" type="text/javascript"></script>
    <!-- initiate function on scroll -->
    <script>
        $(document).ready(function(){
            $(window).scroll(function() {
                $('.animateMePlz').animateMePlz();
            });
        }) 
    </script>
</body>

Any HTML elements with that class (<div class="animateMePlz"></div>) will be animated upon scroll.

Note: I would recommend having a unique class name, as used above, for all elements you want animated. Using a class you already frequently have in your HTML – such as $('.container').animateMePlz() – will likely be tougher to manage at scale. If this note was confusing to you, just ignore it and do exactly as shown above.

3. Insert animate.css

You can insert animate.css via CDN by copying what I entered below. Make sure this is in the <head> of your document. You can also download the file from Dan Eden's website. 


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

4. Apply to elements

Add the class 'animateMePlz' to any element you want to animate. 


<body>
    ...
    <div class="animateMePlz">
        Fade this div in!
    </div>
</body>

The default animation is fadeIn. If you would like to choose a different animation, after installing the plugin, check out the available customizations.