Interface RippleConfig

Ripple parameters.

Hierarchy

  • RippleConfig

Properties

color delay expandDuration expandEase expandOnClick expandedFactor fadeOutOnClick gradient gradientSpotlight ignore initialX initialY on prefix rememberPositionOnDisable sharpSpotlight size target textClip toggleDuration trackCursor trackDuration trackEase

Properties

color

color: string

Ripple color.

Default Value

#ffffff42

delay

delay: number

Lag before the ripple moves.

Default Value

0

expandDuration

expandDuration: number

Ripple display animation duration in seconds.

Default Value

0.4

expandEase

expandEase: string

Grow animation easing function.

Remarks

See GSAP Eases for possible easings.

Default Value

none

expandOnClick

expandOnClick: boolean

Whether the ripple should grow when the target is clicked.

Default Value

true

expandedFactor

expandedFactor: number

Target element size multiplier to determine ripple expanded size (when expandOnClick: true). Rela

Default Value

2

fadeOutOnClick

fadeOutOnClick: boolean

Whether the ripple should fade out when the target is clicked.

Default Value

true

gradient

gradient: boolean

If the ripple should be a gradient.

Default Value

false

gradientSpotlight

gradientSpotlight: ((size: string, x: string, y: string, deltaX: string, deltaY: string, color: string) => string)

Type declaration

    • (size: string, x: string, y: string, deltaX: string, deltaY: string, color: string): string

    • Function to generates the gradient spotlight

      Default Value

      (size, x, y, deltaX, deltaY, color) => {
      return `radial-gradient(${size} at calc(${x} + ${deltaX}) calc(${y} + ${deltaY}), ${color}, transparent)`;
      }

      Parameters

      • size: string
      • x: string
      • y: string
      • deltaX: string
      • deltaY: string
      • color: string

      Returns string

ignore

ignore: string

Selector for which the ripple won't be applied.

Default Value

.disabled, [disabled]

initialX

initialX: string

Initial horizontal relative position, expressed in percent.

Default Value

50%

initialY

initialY: string

Initial vertical relative position, expressed in percent.

Default Value

50%

on

on: "click" | "always" | "hover"

Event that triggers the ripple.

Default Value

click

prefix

prefix: string

Prefix to css vars.

Default Value

ripple

rememberPositionOnDisable

rememberPositionOnDisable: boolean

Rembmer the ripple position on disable in case of ulterior reenable.

Default Value

false

sharpSpotlight

sharpSpotlight: ((size: string, x: string, y: string, deltaX: string, deltaY: string, color: string) => string)

Type declaration

    • (size: string, x: string, y: string, deltaX: string, deltaY: string, color: string): string

    • Function to generates the sharp spotlight

      Default Value

      (size, x, y, deltaX, deltaY, color) => {
       return `radial-gradient(${size} at calc(${x} + ${deltaX}) calc(${y} + ${deltaY}), ${color} 0%, ${color} 100%, transparent)`;
      }

      Parameters

      • size: string
      • x: string
      • y: string
      • deltaX: string
      • deltaY: string
      • color: string

      Returns string

size

size: string

Ripple size.

Default Value

0

target

target: string

Target selector. e.g.

target : '.ripple-text';

Default Value

.ripple

textClip

textClip: boolean

Whether the ripple should apply as a text clip.

Default Value

false

toggleDuration

toggleDuration: number

Ripple display animation duration in seconds.

Default Value

0.1

trackCursor

trackCursor: boolean

Whether the ripple should follow the cursor.

Default Value

true

trackDuration

trackDuration: number

Cursor tracking animation duration.

Default Value

0.1

trackEase

trackEase: string

Tracking easing function. GSAP Eases

Default Value

none

Settings

Member Visibility

Theme

Generated using TypeDoc