customize animateMePlz

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>