Next Cursor

Next 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 an element is hovered you will have to link that Cursor’s state with the element.
Linking works with classes. So, if we want to make an element magnetic, then we have to apply a class to that element, like “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 specially useful for example to apply “Hidden” state to all links at a page using “a” tag selector.

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

Cursor has it’s own default settings when it is not being affected by a state. Size properties work with scale. Cursor has 48px dimensions, so scale values are applied regarding them.
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 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: determines the border of the Cursor. Border state will style all border properties except radius, that can only be applied here (initially).
Speed: determines how much delay to apply to the Cursor to catch up user’s cursor. The demo uses 0.55.
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.

– Tamu