MouseFollow
Animation

MouseFollow is a plugin that manages animations that follow mouse position

Styles

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.

Javascript

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 */}).

Usage

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.

SyntaxMixinDescription
Component.xt-mousefollowxt-mousefollowStyles for mousefollow

Options

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

Util

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

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

Properties

Access properties by getting self object.

let self = Xt.get({ name: 'xt-mousefollow', el: document.querySelector('.my-container') })
const container = self.container
SyntaxDescription
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

Methods

Call methods by getting self object.

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