# Mouse Cursor Follower

You can add a fancy mouse cursor interaction to the template elements in a declarative way.

# Highlight Elements

All page links are highlighted by default as set in plugin options. No need for any additional markup.

<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>

Note

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 to be set on the magnifying elements as they may produce visual glitches due to the conflicts with 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 names 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

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>