--- title: "Examples" permalink: /examples layout: default ---
Creates a div that animates when you mouse over sibling elements.
{% highlight javascript %} const elementDefault = document.getElementById("default"); const lavalampDefault = new Lavalamp(elementDefault); {% endhighlight %}Calculates margins when determining the width and height of the lava lamp object.
{% highlight javascript %} const elementMargins = document.getElementById("margins"); const lavalampMargins = new Lavalamp(elementMargins, { margins: true }); {% endhighlight %}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.
{% highlight javascript %} const elementSetOnClick = document.getElementById("setonclick"); const lavalampSetOnClick = new Lavalamp(elementSetOnClick, { setOnClick: true }); {% endhighlight %}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.
{% highlight javascript %} 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; lavalampSetActive.reposition(newActiveElement); }); {% endhighlight %}You can put a delay before and after hover states.
{% highlight javascript %} const elementDelay = document.getElementById("delay"); const lavalampDelay = new Lavalamp(elementDelay, { delayOn: 500, delayOff: 1000, }); {% endhighlight %}LavalampClass object animates on object focus.
{% highlight javascript %} const elementFocus = document.getElementById("focus"); const lavalampFocus = new Lavalamp(elementFocus, { enableFocus: true, }); {% endhighlight %}LavalampClass object moves on focus of decendants.
{% highlight javascript %} const elementDeepFocus = document.getElementById("focus-deep"); const lavalampDeepFocus = new Lavalamp(elementDeepFocus, { deepFocus: true, }); {% endhighlight %}