MouseFollow is a plugin that manages animations that follow mouse position


You can customize the default styles of this component inside tailwind.config.js setting theme.extend.xtendui.mousefollow see css customization. Check xtendui/src/mousefollow.css.js for default styles.


Import the javascript file with import 'xtendui/src/mousefollow'.

Initialize automatically within markup with [data-xt-mousefollow="{ <options> }"].

Initialize manually within javascript with new Xt.Mousefollow(document.querySelector('.my-container'), {/* options */}).


Initialize mousefollow container to the element that bounds the mosefollow, for the targets to actually mousefollow use options.targets.

Use component classes to create a mousefollow and add fixed position.

Remember not to transition transform of .xt-mousefollow element.

Component.xt-mousefollowxt-mousefollowStyles for mousefollow


Here are the main javascript options.

SyntaxDefault / ArgumentsDescription
Optiondebug:BooleanfalseDebug on console
Optiontargets:Query':scope > .xt-mousefollow'Mousefollow targets
OptionclassSkip:BooleanfalseSkip class activation and deactivation
Optiontransform:BooleantrueUse transform instead of position
Optionfriction({ delta }):Function<Function>Function for friction
OptionmouseCheck({ self }):Function|falsefalseFunction called on activate/deactivate, return false to skip activation/deactivation, return Boolean

Default functions as follow.

friction: ({ delta }) => {
  return delta / 9

Match Media

You can add additional options that gets added on match media query. You can use different queries with different and nested options.

SyntaxDefault / ArgumentsDescription
Optionmatches:ObjectfalseAdd additional options on match media query


You can get self object from DOM node on Xtend UI components with Xt.get.

let self = Xt.get({ name: 'xt-mousefollow', el: document.querySelector('.my-container') })

You can set default options for all components of the same type, with Xt.options.

Xt.options['xt-mousefollow'] = {
  debug: true,


Listen to events, for listeners use this guideline.

SyntaxDOM ElementDescription
Eventon.xt.mousefollowcontainerActivation event (event e.detail is original event)
Eventoff.xt.mousefollowcontainerDeactivation event (event e.detail is original event)
Eventchange.xt.mousefollowcontainerChange event (event e.detail is original event)
Eventinit.xt.mousefollowcontainerInit or reinit event
Eventstatus.xt.mousefollowcontainerStatus event (enabled or disabled)
Eventdestroy.xt.mousefollowcontainerDestroy event


Access properties by getting self object.

let self = Xt.get({ name: 'xt-mousefollow', el: document.querySelector('.my-container') })
const container = self.container
PropertycomponentName:StringComponent name (used in Xt.get)
Propertyoptions:ObjectFinal options
Propertyinitial:BooleanIf initial or reset activation
Propertydisabled:BooleanIf component disabled
Propertycontainer:NodeContainer node
Propertytargets:ArrayTargets nodes


Call methods by getting self object.

let self = Xt.get({ name: 'xt-mousefollow', el: document.querySelector('.my-container') })
self = null
Methodself.reinit()Reinit component
Methodself.disable()Disable component
Methodself.enable()Enable component
Methodself.destroy()Destroy component