Cursor

How it works

Cursor works with states. States are those properties shown at the demo: Magnetic, Repel, Exclusion, Color, Skew…
In order to apply a state to the Cursor when a widget is hovered you will have to link that state to the widget.
Linking works with classes. So, if we want to make a widget magnetic, then we have to apply a class to that widget, e.g: “my-magnetic”. Once set, at Cursor’s Magnetic state we will create a new magnetic item and set “my-magnetic” at the class input. That’s it. This is how all states work and each item created at the states will have it’s own customization controls.
Although linking states works with classes, it also admits tags selector. It is especially useful for example to apply “Hidden” state to all links at a page using the “a” tag selector.

Content tab

Cursor settings

CSS Cursor: determines the CSS cursor to apply to user’s cursor at the page.
Color: determines the initial color of the Cursor.
Size: determines the initial size of the Cursor.
Active size: determines the size of the Cursor when the user makes a click.
Skew: determines the initial skew of the Cursor.
zIndex: determines the z-index of the Cursor.
Visible by default: wether the Cursor should be initially visible or not. If it isn’t visible, Cursor can become visible using Scale state. If it is visible, Cursor can be hidden using Hidden state.
Border radius: determines the border radius of the Cursor.
Speed: determines how much delay to apply to the Cursor to catch up user’s cursor.
Hide on leave: if true, Cursor will have a hide animation when the user leaves the site.
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

Multiple Cursors

In order to have more than one Cursor at a page, then you will just need to create a new Cursor widget. Each of the Cursors created will have it’s own settings and states, and the same target can be shared by all of the Cursors at a page at any moment. This is so powerful, allowing you to create fancy Cursor trails.