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
Transition
Utility functions for calling functions on a schedule.
Examples
// linear easing function
hx.ease.linear(0) // returns 0
hx.ease.linear(0.5) // returns 0.5
hx.ease.linear(1) // returns 1

// quadratic easing function
hx.ease.quad(0) // returns 0
hx.ease.quad(0.5) // returns 0.25
hx.ease.quad(1) // returns 1

// cubic easing function
hx.ease.cubic(0) // returns 0
hx.ease.cubic(0.5) // returns 0.125
hx.ease.cubic(1) // returns 1

hx.loop(function() {
  // will call this function every frame until true is returned
})

// start a transition that should run over the next 1 second
// the callback will be called with the progress every frame
hx.transition(1000, function(progress) {
  // progress will be a value between 0 and 1
})
Api
Change Log
Objects
ease
A collection of easing functions that map from domain [0, 1] to range [0, 1]
Functions
cubicinputNumberNumber
The cubic easing function is defined as 
function(x) {
  return x*x*x;
}
Arguments
inputNumber
A value between 0 and 1
Returns
Number
A value between 0 and 1
linearinputNumberNumber
The linear easing function is defined as 
function(x) {
  return x;
}
Arguments
inputNumber
A value between 0 and 1
Returns
Number
A value between 0 and 1
quadinputNumberNumber
The quadratic easing function is defined as 
function(x) {
  return x*x;
}
Arguments
inputNumber
A value between 0 and 1
Returns
Number
A value between 0 and 1
Functions
hx.loopcallbackFunction
Calls a function every frame until it returns true. This will attempt to use requestAnimationFrame , falling back to setTimeout if requestAnimationFrame is unavailable.
Arguments
callbackBoolean
Return true to end the loop
Returns
Boolean
hx.transitionmillisNumbercallbackFunctioneaseFunctionendCallbackFunctionFunction
Calls a function every frame for an amount of time, providing the progress to the callback. This will attempt to use requestAnimationFrame , falling back to setTimeout if requestAnimationFrame is unavailable.
Arguments
millisNumber
The transition's duration in milliseconds
callbackcancelledBooleanprogressNumber
The function that gets called each frame
Arguments
cancelledBoolean
If the transition has been cancelled and this is the final call, then cancelled will be true, otherwise it will be false.
progressNumber
easeinputNumberNumber
The easing function to use. You can use one of the predefined functions on hx.ease, or you can define your own.
Default: hx.ease.linear
Arguments
inputNumber
A value between 0 and 1
Returns
Number
A value between 0 and 1
endCallbackcancelledBoolean
Arguments
cancelledBoolean
Will be true if the transition was cancelled using the returned cancel function, otherwise will be true
Returns
function
A function that can be called to cancel the transition. 
var stop = hx.transition(1000, cb)

// to stop/cancel the transition, the stop function can be called:
stop()