Premium element

Animated text

Slide to Navigate

Slide to Navigate enables a smooth, interactive slide-to-unlock animation, ideal for directing users to a new page or section.

Preview

Quick Setup

To activate the Slide to Navigate feature, add the data-slide-to-navigate attribute to the desired element (preferably a div). Customize the appearance and behavior by setting the following optional attributes.

data-slide-to-navigate=true

Required

Activates the Slide to Navigate animation on the element.

data-redirect-url

Required

Specifies the URL to navigate to upon sliding.

Available Presets

data-preset="preset-name"

Optional

modern

minimal

neon

glassmorphism

solid

gradient

neumorphism

retro

Advanced configuration

data-height

Optional

Sets the height of the slider.

Default: 70

data-width

Optional

Determines the base width of the slider.

Default: 100%

data-mobile-width

Optional

Specifies the width of the slider on mobile devices.

data-slider-background

Optional

Sets a custom background color for the slider. Example: #FFFFFF

data-handle-color

Optional

Specifies the color of the handle (slider button).. Example: #000000

data-text-color

Optional

Sets the color of the slider text. Example: #FFFFFF

data-font-size

Optional

Defines the font size of the slider text. Example: 16

data-font-family

Optional

Sets the font family for the slider text. Example: Inter

data-redirect-url

Optional

Sets the font family for the slider text. Example: Inter

We're here to help

Choose how you'd like to connect with our support team

Contact Support

Get help from our team of experts

Response within 24 hours