Kinsey

# Mouse Cursor Follower

Add a fancy mouse cursor interaction to template elements in a declarative way.

# Highlight Elements

All page links are highlighted by default as set in plugin options. No additional markup is needed.

<a href="#">Regular Link</a>

<a class="js-arts-cursor-no-highlight" href="#">Regular link but with disabled highlight</a>

# Div Element

<div class="js-arts-cursor-highlight">Div element</div>

# Magnetic Elements

# Simple

<div 
  data-arts-cursor="true"
  data-arts-cursor-magnetic="true"
>
</div>

# Scale Up by 3x the Follower

<div 
  data-arts-cursor="true" 
  data-arts-cursor-magnetic="true" 
  data-arts-cursor-scale="3.0"
>
</div>

# Scale the Follower According to the Element Width or Height

<div 
  data-arts-cursor="true" 
  data-arts-cursor-magnetic="true" 
  data-arts-cursor-scale="current"
>
</div>

# Hide Native Cursor

<div 
  data-arts-cursor="true" 
  data-arts-cursor-magnetic="true" 
  data-arts-cursor-hide-native="true"
>
</div>

# Hide Both Native Cursor and Follower

<div 
  data-arts-cursor="true" 
  data-arts-cursor-magnetic="true" 
  data-arts-cursor-hide-native="true" 
  data-arts-cursor-scale="0.0"
>
</div>

WARNING

Note: The magnification effect may work incorrectly if there is a CSS transition rule set on the element. It's recommended to avoid any CSS transforms and transitions on the magnifying elements as they may produce visual glitches due to conflicts with the GSAP engine.

As a good alternative, create an outer wrapper on the magnifying element with all the required transforms and transitions.

# Icons & Labels

# Icon Helper

A class name set material-icons add will be temporarily added to the icon holder on mouse hover over the element.

<div
  data-arts-cursor="true"
  data-arts-cursor-scale="1.6"
  data-arts-cursor-hide-native="true"
  data-arts-cursor-icon-class="material-icons add"
>
</div>

# Label Helper

The string "Hey!" will be temporarily added to the label holder on mouse hover over the element.

<div
  data-arts-cursor="true"
  data-arts-cursor-scale="1.6"
  data-arts-cursor-hide-native="true"
  data-arts-cursor-label="Hey!"
>
</div>

← Slider Background Change →