JS Events

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

Block Events

Accordion

When a visitor clicks an item again while it is still opening or closing, the unfinished animation fires no shown or hidden. Only the animation that finishes fires one. Opening an item, closing it halfway and opening it again fires show, hide, show, shown.

Alert

Carousel

Changelog

Countdown

Gist

Google Maps

Image Compare

Interactive Link

Marquee

Tabs

Video

Core List

Extensions

Effects

update.effects.scroll.gkt fires on every frame only for elements whose scroll effect runs in a script. In browsers with scroll-driven animations, Ghost Kit Pro hands simpler scroll effects to the browser, and those elements do not fire this event. That covers effects with a Transition other than Spring that change only Opacity and X with the Page Scroll trigger, or only Opacity, X and Y with the Viewport trigger. To keep the event for such an element, set its Transition to Spring.

Counter