Rhye

# Mouse Cursor Follower

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

# Example 1: Scale & Magnify Effects

In the following code, once the element with the data-arts-cursor attribute is hovered:

  • The cursor-following circle will be scaled by 1.7 (70%).
  • The element will magnify to the cursor on near mouse movement.
  • The native mouse cursor will be hidden.
<div
  data-arts-cursor="true" 
  data-arts-cursor-scale="1.7" 
  data-arts-cursor-magnetic="true"
  data-arts-cursor-hide-native="true"
  class="header__burger"
  id="js-burger"
>
  ...
</div>

# Example 2: Setting Cursor Icon

In the following code, once the element with the data-arts-cursor attribute is hovered:

  • The cursor-following circle will be scaled by 1.6 (60%).
  • The cursor icon class will be set to add. The list of available icon classes can be found at Material Icons (opens new window).
  • The native mouse cursor will be hidden.
<a
  data-arts-cursor="true"
  data-arts-cursor-scale="1.6" 
  data-arts-cursor-icon="add" 
  data-arts-cursor-hide-native="true" 
  href="img/assets/project1/img-1-2.jpg" 
  class="hover-zoom figure-image__link"
  data-size="900x1350" 
  data-title="Long Road"
>
  ...
</a>

# Example 3: Setting Cursor Label

In the following code, once the element with the data-arts-cursor attribute is hovered:

  • The cursor-following circle will be scaled by 0.0 (0%) – the circle will hide.
  • The cursor text label will be set to Play.
  • The element will magnify to the cursor on near mouse movement.
  • The native mouse cursor will be hidden.
<div
  data-arts-cursor="true" 
  data-arts-cursor-scale="0.0" 
  data-arts-cursor-label="Play" 
  data-arts-cursor-hide-native="true" 
  data-arts-cursor-magnetic="true"
  class="section-video__link-inner"
>
  ...
</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.

← Preloader →