Animations

Usage

This is a variable or event handle.

Examples

<div class="animate-dom-ready nebula-fade-in-up" nebula-delay="500">Welcome</div>

<div class="animate-window-load nebula-fade-in-up slow">Welcome</div>

<div class="animate-font-load nebula-fade-in-up slow" nebula-font-name="Condiment">Welcome</div>

<a class="animate-click nebula-push" href="#">Click Here</a>

<a nebula-click="nebula-push" href="#">Click Here</a>

<a nebula-hover="nebula-grow" href="#">Hover Me</a>

<a nebula-hover="nebula-grow" nebula-click="nebula-push" href="#">Click Here</a>

<a class="animate-click nebula-push" nebula-hover="nebula-grow" href="#">Click Here</a>

jQuery('#nebula-hero-name').on('click', function(){
    jQuery(this).removeClass(); //Remove all of the previous animation classes
    let animations = ['nebula-push-loose', 'nebula-pull-loose', 'nebula-bounce', 'nebula-jump'];
    let randomAnimation = animations[Math.floor(Math.random()*animations.length)];
    nebula.animate('#nebula-hero-name', randomAnimation);
    return false;
});

Demo

Additional Notes

This uses a series of classes to modify the type and speed of animation. Elements must be display block or inline-block to be animated.

Event Trigger Classes

These have built in classes that listen for some events so that JavaScript does not need to be written to use them. They include:

• animate-dom-ready (DOM ready)
• animate-window-load (window load)
• animate-font-load (specific font load)
  • This must be accompanied by an attribute of nebula-font-name="Condiment"
• animate-click (element click)
• animate (for manual trigger)

Note: For detected bot traffic (such as Googlebot), all “ready” and “load” based animations are skipped and those elements are shown immediately. Although these animations would likely be just fine for things like search indexing, this is done as a precaution regardless.

There is also a “safety net” built into Nebula where all “ready” and “load” based animations will be triggered within a few seconds of loading even if there is a JavaScript error in a linked asset. The safety net ignores animation delays attributes. A “used-safety-net” class will appear on the body if this triggered the animations.

Speed Modifiers

• fastest (.25s)
• faster (.5s)
• fast (.75s)
• slow (1s)
• slower (2s)
• slowest (3s)

Continuous Animations

These animations continue repeatedly

• nebula-spin
• nebula-fade
• nebula-zoom
• nebula-wave-x
• nebula-wave-y
• nebula-intensifies

One-Time Animations

These animations happen once and then stop.

• nebula-fade-out
• nebula-fade-out-up
• nebula-fade-out-down
• nebula-fade-out-left
• nebula-fade-out-right
• nebula-fade-in
• nebula-fade-in-up
• nebula-fade-in-down
• nebula-fade-in-left
• nebula-fade-in-right
• nebula-zoom-out
• nebula-zoom-in
• nebula-reveal-in
• nebula-reveal-out
• nebula-stretch-in
• nebula-stretch-out
• nebula-flip-in-x
• nebula-flip-in-y
• nebula-flip-out-x
• nebula-flip-out-y
• nebula-tap
• nebula-tap-loose
• nebula-push
• nebula-push-loose
• nebula-shove
• nebula-shove-loose
• nebula-shove-out
• nebula-tug
• nebula-tug-loose
• nebula-pull
• nebula-pull-loose
• nebula-thrust
• nebula-thrust-loose
• nebula-thrust-in
• nebula-shake
• nebula-nod

Hover Animations

• nebula-grow

Advanced

For more advanced integration, see the nebulaAnimate() JavaScript function.

Source File

Located in /assets/scss/partials/_animations.scss.

« Back to functions & variables list