HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
Edit Page
Animate
Animate element's styles and attributes
About
The Animation class lets you do a one shot animation on an element. No scheduling is possible with animation - all changes happen in one go. To perform animations one after another, morphs are required.
Examples
Animations

HTML

<button id="demo-1" class="hx-btn hx-positive"><i class="fa fa-play-circle-o"></i> Run</button>
<button id="demo-1-reset" class="hx-btn hx-contrast"><i class="fa fa-refresh"></i> Reset</button>

JavaScript

hx.select('#demo-1').on('click', function () {
  hx.select('body')
    .animate()
    .style('background-color', '#000000', 500)
})

hx.select('#demo-1-reset').on('click', function () {
  hx.select('body').style('background-color', undefined)
})
Morphs
The Morph class lets you chain animations together so that they happen one after another.

HTML

<button id="demo-3" class="hx-btn hx-positive"><i class="fa fa-play-circle-o"></i> Run</button>

JavaScript

hx.select('#demo-3').on('click', function () {
  hx.select('body').morph()
    .then(function () {
      return hx.select('body').animate().style('background-color', '#ff0000', 500)
    })
    .then(function () {
      return hx.select('body').animate().style('background-color', '#00ff00', 500)
    })
    .then(function () {
      return hx.select('body').animate().style('background-color', '#0000ff', 500)
    })
    .then(function () {
      hx.select('body').style('background-color', undefined)
    })
    .go()
})
This is the same as above - just using some methods on Morph that allow more concise code.

HTML

<button id="demo-4" class="hx-btn hx-positive"><i class="fa fa-play-circle-o"></i> Run</button>

JavaScript

hx.select('#demo-4').on('click', function () {
  hx.select('body').morph()
  .thenStyle('background-color', '#ff0000', 500)
  .thenStyle('background-color', '#00ff00', 500)
  .thenStyle('background-color', '#0000ff', 500)
  .then(function () {
    hx.select('body').style('background-color', undefined)
  })
  .go()
})
Api
Change Log
Prototypes
AnimationextendsEventEmitter
A class for animating the styles and attributes of a Node
Events
cancelled
Emitted when cancel() is called on this Animation
end
Emitted when all of the animations specified have ended
Methods
attrattributeStringendValueString / NumberdurationNumberAnimation
Animates an attribute on the Node
Arguments
attributeString
The attribute to animate
endValueString / Number
The value to animate the attribute to
durationNumber
The length of the animation in milliseconds
Default: 200
Returns
Animation
This Animation for chaining
attrattributeStringstartValueString / NumberendValueString / NumberdurationNumberAnimation
Animates an attribute on the Node
Arguments
attributeString
The attribute to animate
startValueString / Number
The value to animate the attribute from
endValueString / Number
The value to animate the attribute to
durationNumber
The length of the animation in milliseconds
Returns
Animation
This Animation for chaining
cancelAnimation
Cancels this Animation
Returns
Animation
This Animation for chaining
stylepropertyStringendValueString / NumberdurationNumberAnimation
Animates a style property on the Node
Arguments
propertyString
The property to animate
endValueString / Number
The value to animate the property to
durationNumber
The length of the animation in milliseconds
Default: 200
Returns
Animation
This Animation for chaining
stylepropertyStringendValueString / NumberdurationNumberAnimation
Animates a style property on the Node
Arguments
propertyString
The property to animate
endValueString / Number
The value to animate the property to
durationNumber
The length of the animation in milliseconds
Default: 200
Returns
Animation
This Animation for chaining
MorphextendsEventEmitter
A class for chaining animations, asynchronous function calls, and synchronous function calls together.
Events
cancelled
Emitted when cancel() is called on this Morph.
end
Emitted when the entire chain of actions have finished for this Morph
Methods
andmorphStringdurationNumberAnimation
Adds an action that should happen concurrently with the previous action
Arguments
morphString
The named morph to use.
durationNumber
The length of the animation in milliseconds
Default: 200
Returns
Animation
This Morph for chaining
andfunctionFunctionMorph
Adds an action that should happen concurrently with the previous action
Arguments
functiondoneFunction
A function that gets called as part of the chain. If this function returns an EventEmitter, the behaviour is to wait for that event emitter to emit an 'end' event before proceeding to the next step.
Anything that is returned from this function that has a 'cancel' method will be called.
Arguments
done
If specified in the argument list, this action will only complete when this function is called to complete the action.
If this is not specified in the argument list the function will be called synchronously (ie it will block).
The later option is useful for cleanup at the end of a morph.
Returns
Morph
This Morph for chaining.
andAttrattributeStringendValueString / NumberdurationNumberMorph
Adds an action that animates an attributes value on the element concurrently with the previous action.
Arguments
attributeString
The attribute to animate
endValueString / Number
The value to animate the attribute to
durationNumber
The length of the animation in milliseconds
Default: 200
Returns
Morph
This Morph for chaining
andAttrattributeStringstartValueString / NumberendValueString / NumberdurationNumberMorph
Adds an action that animates an attributes value on the element concurrently with the previous action.
Arguments
attributeString
The attribute to animate
startValueString / Number
The value to animate the attribute from
endValueString / Number
The value to animate the attribute to
durationNumber
The length of the animation in milliseconds
Returns
Morph
This Morph for chaining
andStylepropertyStringendValueString / NumberdurationNumberMorph
Adds an action that styles the element concurrently with the previous action
Arguments
propertyString
The property to animate
endValueString / Number
The value to animate the property to
durationNumber
The length of the animation in milliseconds
Default: 200
Returns
Morph
This Morph for chaining
andStylepropertyStringstartValueString / NumberendValueString / NumberdurationNumberMorph
Adds an action that styles the element concurrently with the previous action
Arguments
propertyString
The property to animate
startValueString / Number
The value to animate the property from
endValueString / Number
The value to animate the property to
durationNumber
The length of the animation in milliseconds
Returns
Morph
This Morph for chaining
gocancelOngoingBooleanMorph
Starts this morph. This should always be called at the end of the chain of actions.
Arguments
cancelOngoingBoolean
Stops any ongoing morphs for the selected node
Default: false
Returns
Morph
This Morph for chaining
thenmorphStringdurationNumberMorph
Adds an action that should happen after the previous action
Arguments
morphString
The named morph to use.
durationNumber
The length of the animation in milliseconds
Default: 200
Returns
Morph
A new Morph object that is linked to the previous morph's end trigger. This morph will contain a single action - the one specified as part of this call to then.
thenfunctionFunctionMorph
Adds an action that should happen after the previous action
Arguments
functiondoneFunction
A function that gets called as part of the chain. If this function returns an EventEmitter, the behaviour is to wait for that EventEmitter to emit an 'end' event before proceeding to the next step.
Anything that is returned from this function that has a cancel() method will be called.
Arguments
done
If specified in the argument list, this action will only complete when this function is called to complete the action.
If this is not specified in the argument list the function will be called synchronously (ie it will block).
The later option is useful for cleanup at the end of a morph.
Returns
Morph
A new Morph object that is linked to the previous morph's end trigger. This morph will contain a single action - the one specified as part of this call to then.
thenAttrattributeStringendValueString / NumberdurationNumberMorph
Adds an action that animates an attributes value on the element after the previous action completes.
Arguments
attributeString
The attribute to animate
endValueString / Number
The value to animate the attribute to
durationNumber
The length of the animation in milliseconds
Default: 200
Returns
Morph
A new Morph object that is linked to the previous morph's end trigger. This morph will contain a single action - the one specified as part of this call to then.
thenAttrattributeStringstartValueString / NumberendValueString / NumberdurationNumberMorph
Adds an action that animates an attributes value on the element after the previous action completes.
Arguments
attributeString
The attribute to animate
startValueString / Number
The value to animate the attribute from
endValueString / Number
The value to animate the attribute to
durationNumber
The length of the animation in milliseconds
Returns
Morph
A new Morph object that is linked to the previous morph's end trigger. This morph will contain a single action - the one specified as part of this call to then.
thenStylepropertyStringendValueString / NumberdurationNumberMorph
Adds an action that styles the element after the previous action completes
Arguments
propertyString
The property to animate
endValueString / Number
The value to animate the property to
durationNumber
The length of the animation in milliseconds
Default: 200
Returns
Morph
A new Morph object that is linked to the previous morph's end trigger. This morph will contain a single action - the one specified as part of this call to then.
thenStylepropertyStringpropertyStringstartValueString / NumberendValueString / NumberdurationNumberMorph
Adds an action that styles the element after the previous action completes
Arguments
propertyString
The name of the css style property to animate
propertyString
The property to animate
startValueString / Number
The value to animate the property from
endValueString / Number
The value to animate the property to
durationNumber
The length of the animation in milliseconds
Returns
Morph
A new Morph object that is linked to the previous morph's end trigger. This morph will contain a single action - the one specified as part of this call to then.
Selection
This module adds some extra methods to Selection
Methods
animateAnimation
Creates a new animation using the first node in the selection
Returns
Animation
A new Animation instance that applies to the node this Selection wraps
morphMorph
Creates a new morph using the first node in the selection
Returns
Morph
A new Morph instance that applies to the node this Selection wraps
Functions
hx.animatenodeElementeaseFunctionAnimation
A factory function for creating Animation instances
Arguments
nodeElement
easevalueNumberNumber
The easing function to use for the animations. See the Transition docs for information on the inbuilt hx.ease functions
Arguments
valueNumber
The input value
Returns
Number
The value after it has been transformed by the easing function
Returns
Animation
The newly constructed Animation object
hx.morphnodeElementMorph
A factory function for creating Morph instances
Arguments
nodeElement
Returns
Morph
The newly constructed Morph object.
hx.morph.registernameStringactionFunction
Registers a named morph action.
Arguments
nameString
The name to register the action under
actionnodeElementdurationNumber
A function that performs the action
Arguments
nodeElement
The node to apply the action to (if it makes sense to apply the action to a node)
durationNumber
The length the action should take in milliseconds. The action being defined should respect this value.