Turn Down For What

Fire up that loud, Another round of shots

Make your website wait for that epic beat drop.

Install

npm i turn-down-for-what -S

Usage

Babel

import turnDownForWhat from 'turn-down-for-what';

turnDownForWhat();

ES6

const turnDownForWhat = require('turn-down-for-what');

turnDownForWhat();

Arguments

The turnDownForWhat function takes two arguments.

const affectedNodes = ['img', 'svg', 'p'];
const options = { noDelay: true };

turnDownForWhat(affectedNodes, options);

• affectedNodes: An array with the HTML tags that are supposed to be affected by the CSS animation. The code uses document.querySelectorAll to retrieve the nodes, so the syntax must be the same. The default is ['*'], meaning all tags will be matched.

Example

// Animates only divs matching the class 'animate' and the tag <p id="banner">
turnDownForWhat(['div.animate', 'p#banner']);

• options: The second argument is an object that can configure some parameters:

  • noDelay [default: false]: By default the animation creates a random delay for the intro, making it look that each node is joining the party one at a time. If you are animating a single node, or you just want to have them all jump at the same time, pass true to disable the delay and avoid weird behaviours.

    Example

    // Everything will start the animation at the same time
    turnDownForWhat(['*'], { noDelay: true });

  • jitterAmount [default: 10]: A modifier for the amount of jitter the animation will receive during the intro. Increase to be more "shaky", and decrease for a more "stable" animation.

    Values below 4 behave poorly, with little to no jitter.

  • numKeyframes [default: 10]: By default 10 random keyframes are generated. You can define how many you want with this property.

  • numTurntAnimations [default: 10]: After the drop your page will Turn Down For What. Define how many animations (keyframes) you want for this part (does not affect the intro). The default is 10.

    Example

    // Increase the number of animations
    turnDownForWhat(['*'], {
      numKeyframes: 20,
      numTurntAnimations: 20,
    });

  • maxNodes [default: 1000]: For performance reasons only the first 1000 nodes will be animated. If you wish to override, pass another value.

License

MIT

Contact

You can reach me on my Github or send an email to [email protected].

This code has been ~~copied~~ inspired by: https://github.com/nthitz/turndownforwhatjs