JS Events for Blocks and Effects

General Events
Block Events
Extensions
- Effects
- Counter

Ghost Kit provides JS events for different dynamic blocks and for every effect it runs. Each event name ends in .gkt and is dispatched on the block element, and it bubbles, so one listener on document catches events from every block on the page. The event object carries the block’s configuration, and effect events also carry the keyframes and the animation options passed to the animation.

document.addEventListener('init.blocks.gkt', function(event) {
  console.log( event );
})

document.addEventListener('show.accordion.gkt', function( event ) {
  console.log( event, event.relatedTarget );
})

General Events

Event	Params
init.gkt	event
init.blocks.gkt	event

Block Events

Accordion

Event	Params
prepare.accordion.gkt	event.target
prepared.accordion.gkt	event.target
hide.accordion.gkt	event.target event.relatedTarget
hidden.accordion.gkt	event.target event.relatedTarget
show.accordion.gkt	event.target event.relatedTarget
shown.accordion.gkt	event.target event.relatedTarget

Alert

Event	Params
close.alert.gkt	event.target
closed.alert.gkt	event.target

Carousel

Event	Params
init.carousel.gkt	event.target event.options
inited.carousel.gkt	event.target event.options
touchStart.carousel.gkt	event.target event.originalEvent
touchMove.carousel.gkt	event.target event.originalEvent
touchEnd.carousel.gkt	event.target event.originalEvent

Changelog

Event	Params
prepare.changelog.gkt	event.target
prepared.changelog.gkt	event.target

Countdown

Event	Params
prepare.countdown.gkt	event.target
prepared.countdown.gkt	event.target

Gist

Event	Params
prepare.gist.gkt	event.target event.options
prepared.gist.gkt	event.target event.options

Google Maps

Event	Params
prepare.googleMaps.gkt	event.target event.options
prepared.googleMaps.gkt	event.target event.options event.instance

Image Compare

Event	Params
move.imageCompare.gkt	event.target event.originalEvent

Interactive Link

Event	Params
update.interactive-link.gkt	event.relatedTarget event.config
show.interactive-link.gkt	event.relatedTarget event.config
showed.interactive-link.gkt	event.relatedTarget event.config
hide.interactive-link.gkt	event.relatedTarget event.config
hidden.interactive-link.gkt	event.relatedTarget event.config

Marquee

Event	Params
prepare.marquee.gkt	event.target
prepared.marquee.gkt	event.target

Tabs

Event	Params
prepare.tabs.gkt	event.target
prepared.tabs.gkt	event.target
show.tab.gkt	event.target event.relatedTarget
shown.tab.gkt	event.target event.relatedTarget
hide.tab.gkt	event.target event.relatedTarget
hidden.tab.gkt	event.target event.relatedTarget

Video

Event	Params
prepare.video.gkt	event.target
prepared.video.gkt	event.target
prepare.videoWorker.gkt	event.target event.options
prepared.videoWorker.gkt	event.target event.api
prepare.videoObserver.gkt	event.target event.config

Core List

Event	Params
prepare.numberedList.gkt	event.target

Extensions

Effects

Event	Params
prepare.effects.gkt	event.target event.data
prepare.effects.reveal.gkt	event.target event.config
prepared.effects.reveal.gkt	event.target event.config
showed.effects.reveal.gkt	event.target event.config event.keyframes event.options event.stopInView event.leaveCallback
showed.effects.reveal.gkt	event.target event.config event.keyframes event.options event.stopInView event.leaveCallback
prepare.effects.reveal-pro.gkt	event.target event.config event.keyframes event.options
show.effects.reveal-pro.gkt	event.target event.config event.keyframes event.options
showed.effects.reveal-pro.gkt	event.target event.config event.keyframes event.options
hide.effects.reveal-pro.gkt	event.target event.config event.keyframes event.options
hidden.effects.reveal-pro.gkt	event.target event.config event.keyframes event.options
prepare.effects.loop.gkt	event.target event.config
prepared.effects.loop.gkt	event.target event.config
prepare.effects.mouseHover.gkt	event.target event.config event.originalEvent
prepared.effects.mouseHover.gkt	event.target event.config event.originalEvent
update.effects.mouseMove.gkt	event.target event.keyframes event.options event.config
prepare.effects.mousePress.gkt	event.target event.config event.originalEvent
prepared.effects.mousePress.gkt	event.target event.config event.originalEvent
update.effects.scroll.gkt	event.target event.keyframes event.options event.config

Counter

Event	Params
prepare.counter.gkt	event.target event.config
count.counter.gkt	event.target event.config
counted.counter.gkt	event.target event.config

JS Events

Table of Contents