Lava Lamp

Lava Lamp is a navigation plugin for the web browser that uses JavaScript to animate a moving background.

View project on GitHub



Creates a div that animates when you mouse over sibling elements.

const elementDefault = document.getElementById("default");
const lavalampDefault = new Lavalamp(elementDefault);


Calculates margins when determining the width and height of the lava lamp object.

const elementMargins = document.getElementById("margins");
const lavalampMargins = new Lavalamp(elementMargins, {
margins: true

Set on Click

The lava lamp object sets a new active element when you click on it. You still have to set a default active element or the lavalamp won't initialize correctly.

const elementSetOnClick = document.getElementById("setonclick");
const lavalampSetOnClick = new Lavalamp(elementSetOnClick, {
setOnClick: true

Set active element

You can change the current active element by passing it into the wrapper data. After setting the data, you need to update the wrapper so your lavalamp object moves to the correct element.

const elementSetActive = document.getElementById("setactive");
const lavalampSetActive = new Lavalamp(elementSetActive, {});
document.getElementById("setactive-links").addEventListener("change", (e) => {
const index = parseInt(e.currentTarget.value);
const newActiveElement = document.getElementById(`setactive-item-${index}`);
lavalampSetActive.activeElement = newActiveElement;

Delay Animation

You can put a delay before and after hover states.

const elementDelay = document.getElementById("delay");
const lavalampDelay = new Lavalamp(elementDelay, {
delayOn: 500,
delayOff: 1000,

Animate on Focus

LavalampClass object animates on object focus.

const elementFocus = document.getElementById("focus");
const lavalampFocus = new Lavalamp(elementFocus, {
enableFocus: true,

Animate on Decendant Focus

LavalampClass object moves on focus of decendants.

const elementDeepFocus = document.getElementById("focus-deep");
const lavalampDeepFocus = new Lavalamp(elementDeepFocus, {
deepFocus: true,