How it works

Mouse Parallax is a nestable div component. You can put any elements or components in it, like you would do at an Etch div or container. Nested elements or components should be placed inside Content. Display settings live in the Mouse Parallax style.

To start creating Parallax elements, set a Parallax Class in Settings and apply it to the elements you want to have the parallax effect. They will receive an absolute position, so top, left, bottom and right can be set in each element's style. These elements have also to be placed inside Mouse Parallax.

Once an element is converted to a Mouse Parallax element, it uses a data-depth of 1 by default, that will define the Parallax's movement intensity. To customize this intensity, set a data-depth attribute on that element.

Settings

Parallax Class: the CSS selector of the elements that should receive the parallax effect, for example .classname.

Sensitivity: the intensity of the parallax movement.

Easing Factor: how quickly the elements catch up to the pointer. Lower values are smoother.

Invert Movement: if enabled, elements move opposite to the pointer.

Use Device Orientation: if enabled, the parallax also reacts to the device gyroscope.

Max Tilt: the maximum device tilt used to map the parallax, in degrees.

How it works

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 Magnetic elements we will create a new item and set my-magnetic at Element. That's it. This is how all states work and each item created at the states will have its own customization controls.

Although linking states works with classes, it also admits tags selector. It is specially useful for example to apply Hidden to all links at a page using the a tag selector.

Cursor has its own default look 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. Color, Size (–size), Active size (–active-size), z-index and Border live in the Next Cursor style.

Multiple Cursors

In order to have more than one Cursor at a page, then you will just need to set a new Next Cursor component. Each of the Cursors created will have its 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.

Settings

CSS Cursor: the CSS cursor to apply to the user's cursor at the page.

Visible by default: whether the Cursor should be initially visible. If it isn't visible, Cursor can become visible using Size elements. If it is visible, Cursor can be hidden using Hidden elements.

Skew: the initial skew of the Cursor.

Speed: how much delay to apply to the Cursor to catch up the user's cursor. The demo uses 0.55.

GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

Custom easing: used when GSAP easing is set to custom.

Hide on leave: if enabled, Cursor will have a hide animation when the user leaves the site.

Stick delta: how tightly the cursor interpolates when sticking between two elements. Used by Sticky elements.

Magnetic elements

A repeater of magnetic items. Each item:

Element: the CSS class or tag selector to link.

Speed

Intensity

Repel elements

A repeater of repel items. Each item:

Element: the CSS class or tag selector to link.

Speed

Intensity

Stretchy elements

A repeater of stretchy items. Each item:

Element: the CSS class or tag selector to link.

Speed

Intensity

Sticky elements

A repeater of sticky items. Each item:

From element: the CSS class or tag selector where the stick starts.

To element: the CSS class or tag selector where the stick ends.

Size elements

A repeater of size items. Each item:

Element: the CSS class or tag selector to link.

Size: the scale of the Cursor while hovering the element, for example scale(0.2).

Border elements

A repeater of border items. Each item:

Element: the CSS class or tag selector to link.

Width top

Width right

Width bottom

Width left

Style

Color

Radius top

Radius right

Radius bottom

Radius left

Color elements

A repeater of color items. Each item:

Element: the CSS class or tag selector to link.

Color

Exclusion elements

A repeater of exclusion items. Each item:

Element: the CSS class or tag selector to link.

Text elements

A repeater of text items. Each item:

Element: the CSS class or tag selector to link.

Text

Font family

Font size

Color

Backdrop elements

A repeater of backdrop items. Each item:

Element: the CSS class or tag selector to link.

Backdrop: the backdrop-filter amount, for example 0px.

Blur elements

A repeater of blur items. Each item:

Element: the CSS class or tag selector to link.

Blur: the blur amount, for example 0px.

Skew elements

A repeater of skew items. Each item:

Element: the CSS class or tag selector to link.

Skew

Media elements

A repeater of media items. Each item:

Element: the CSS class or tag selector to link.

Media: the image or video shown inside the Cursor.

Hidden elements

A repeater of hidden items. Each item:

Element: the CSS class or tag selector to link.

How it works

Cursor Trail is a nestable div component. Nested elements or components should be placed inside Content. Display settings live in the Cursor Trail style.

There are no nestable Trail Item elements. The trail effect uses the Items repeater. Add, remove and duplicate items as you need. Each item is an image.

Cursor Trail includes five different approaches that can be seen at the demo. You can easily switch between them using the Type control.

Items

A repeater of trail images. Each item:

Image

Trail animation

Type: Type 1, Type 2, Type 3, Type 4 or Type 5. The five approaches from the demo.

Threshold: the pointer distance, in pixels, required before the next trail image appears.

Lerp factor: how quickly the trail position catches up to the pointer. Lower values are smoother.

Show animation

Duration

GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

Custom easing: used when GSAP easing is set to custom.

Hide animation

Scale: the scale of the image when it hides.

Delay

Duration

GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

Custom easing: used when GSAP easing is set to custom.