Homepage Animation Block For Drupal 8 | Jeremy Aaron Heminger | Software / Developer Located in Southern California

Many websites have an animation of some kind running on the homepage. My website is no exception however, I like to experiment with different animations and such and I am sure I will want to regularly swap them out. I could simply dump in a new file whenever I want to make a change but, I like to design things that are a little more elegant. Something that might be used by other people in the real world. So, I built this simple module.

The module allows me to simply drop in a new animation into a specific folder. Then after I clear Drupal's cache the new animation is available in the block settings for the module in a drop-down menu..."simple".

The only requirements for the Javascript are:

The main file that calls the animation needs to be placed into the folder /modules/homepage_animation/_/components/js/anims
The main file needs to use the file convention _name.js
The main file must call a function by using the structure below

/**
 * This provides a standard interface to call any animation found in the /anims folder
 *
 * */
function runBlockAnimation() {
    // call to your javascript
    // myAnimation = new myAnimation();
}
/** --- >
 *
 *  var myAnimation {
    
    }
 */

// at the end call the animation
runBlockAnimation();

The module has Grunt installed allowing the files to be minified from the CMD.

I also included the latest version of Wes Mantooth

Here is the GitHub Repository

This is an example using an animation currently loaded on this website

function runBlockAnimation() {
    
    console.log('Wreathe version 1.1.0 '); 
    
    var w = window.innerWidth,
        h = window.innerHeight;
        
    $w.add_object_single(
        360,
        Wreathe,{
            x:(w/2),
            y:(h/2),
            cr:(h/2)-100
        },
        // attach the animation to the block
        document.getElementById('homepage_animation'),
        w,h
    );
    $w.loop(true);
}
/**
 * @param {Object}
 * */
var Wreathe = function(o) {
    
    this.i = o.i;
    
    this.color = '#efff00';
    
    this.op = 0.8;
    
    this.r = 1;
    
    this.d = Math.random() * 360;
    
    this.kos = Math.random() * 100;
    
    this.count = 0;
    
    this.speed = 30;
    
    var a = $w.math.degrees(o.z);

    this.x = o.x + Math.sin(a) * o.cr;
    this.y = o.y + Math.cos(a) * o.cr;

    $w.canvas.circle(this.i,this.x,this.y,this.r,this.color);
}
/**
 * the loop
 * */
Wreathe.prototype.loop = function() { 
    // 
    this.count++;
    
    if (this.count > this.kos) {
        // reset
        this.count = 0;
        // pick a random time to chnage again
        this.kos = Math.random() * 100;
        // pick a random direction
        this.d += (Math.random() * 90) - 45;
        // make sure this is within the range of a circle
        if (this.d>360) this.d-=360;
        if (this.d < 0) this.d+=360;
    }
    
    // 
    var a = $w.math.radians(this.d);
    this.x += (Math.cos(a) * Math.PI / 180) * this.speed;
    this.y += (Math.sin(a) * Math.PI / 180) * this.speed;
    $w.canvas.circle(this.i,this.x,this.y,this.r,this.color,this.op);
    
    // slowly fade the root into nothing
    this.r -= 0.0001;
    this.op -= 0.001;

}


//
runBlockAnimation();