Reference Source Test 
import Ripples from 'beloader-animations/src/animations/Ripples.js'
public class | version 1.0.0 | since 1.0.0 | source

Ripples

Extends:

AbstractAnimation → Ripples

Ripples is a fully customizable effect that generates... ripples. It can be used as highlighter for click or items. It can also be used as loader whith loop active.

Constructor Summary

Public Constructor
public

constructor(options: Object)

Creates an instance of Ripples

 version 1.0.0 since 1.0.0

Member Summary

Public Members
public

Active ripple index

 since 1.0.0
public

Timeline object
public get

block: HTMLElement

HTML block for container
Private Members
private

_block: *

Method Summary

Public Methods
public

start(): this

Launch the animation
Private Methods
private

Generates a ripple animation given the options

Inherited Summary

From class AbstractAnimation
public get

Always return false if not overriden in childs class

 version 1.0.0 since 1.0.0
public

Animejs animation object or timeline
public

Auto-generated unique id for animation

 since 1.0.0
public

Options for the animation

 since 1.0.0
public

Check if required options have been provided

 version 1.0.0 since 1.0.0

Public Constructors

public constructor(options: Object) version 1.0.0 since 1.0.0 source

Creates an instance of Ripples

Override:

AbstractAnimation#constructor

Params:

NameTypeAttributeDescription
options Object
  • optional
  • default: {}

Options for animation
options.loop boolean
  • optional
  • default: false

Wether if animation should loop
options.duration number
  • optional
  • default: 3000

Duration of one ripple animation (ms)
options.offset number
  • optional
  • default: 1000

Offset between two ripples animations (ms)
options.width string
  • optional
  • default: '100px'

Width for the container (any allowed css value)
options.height string
  • optional
  • default: '100px'

Height for the container (any allowed css value)
options.scale number
  • optional
  • default: 30

Scale factor
options.easing string
  • optional

Easing formula (any allowed easing by animejs)
options.ripples Object
  • optional

Ripples Options
options.ripples.count number
  • optional
  • default: 3

Number of ripples
options.ripples.width string
  • optional
  • default: '3px'

Initial innerWidth of a ripple (any allowed css value)
options.ripples.height string
  • optional
  • default: '3px'

Initial innerWidth of a ripple (any allowed css value)
options.ripples.borderColor string
  • optional
  • default: '#09c'

Border color of ripples (any allowed css value)
options.ripples.borderStyle string
  • optional
  • default: 'solid'

Border style of ripples (any allowed css value)
options.ripples.borderWidth string
  • optional
  • default: '1px'

Initial border width (any allowed css value)
options.ripples.background string
  • optional
  • default: ''

Background property of a ripple (any allowed css value)
options.ripples.opacity Object
  • optional

Specific options for opacity animation
options.ripples.opacity.start number
  • optional
  • default: 1

Initial opacity value
options.ripples.opacity.end number
  • optional
  • default: 0

Final opacity value
options.ripples.opacity.duration number
  • optional
  • default: this.options.duration

Opacity animation duration
options.ripples.opacity.easing number
  • optional
  • default: this.options.easing

Opacity animation easing

Public Members

public activeRipple: Number since 1.0.0 source

Active ripple index

public animation: Timeline source

Timeline object

Override:

AbstractAnimation#animation

public get block: HTMLElement source

HTML block for container

Override:

AbstractAnimation#block

Private Members

private _block: * source

Public Methods

public start(): this source

Launch the animation

Return:

this

Chainable

Private Methods

private _ripple(): Object source

Generates a ripple animation given the options

Return:

Object

Animation that can be added to timeline