Kinekt API

Kinekt exposes created timelines in the Window object whenever you assign the ID to your animations.

All animations with an ID are stored in window.kinekt_timelines object.

It is extremely useful if you plan to chain animations in order to play them in sequential order, to access timelines with the custom JS code, or even create a “connection” with Bricks builder Interactions.

Core Kinekt API methods

• getTimelineByName(‘Animation ID’) // Get timeline by Bricks Builder ID
• getTimelineById(internalId) // Get timeline by internal ID
• listAllTimelineIds() // List all available timelines

Standard GSAP timeline controls via Kinekt API

• timeline.play()
• timeline.pause()
• timeline.reverse()
• timeline.progress(0.5)
• timeline.timeScale(2)
• etc…

Kinekt API state tracking

• window.kinekt_timelines.elementStates // Element interaction states
• window.kinekt_timelines.configs // Timeline recreation configs

Kinekt stores animations in window.kinekt_timelines object.

You can access any timeline by an “Animation ID” that you add in Bricks builder, for instance “Reveal Image”, as shown in the figure above, or an internal ID that is derived from Animation ID.

The key difference between the two is that the internal ID is all lower case, and all spaces are replaced with the dash. For example:

• Animation ID: Reveal Image
• Internal ID: reveal-image

Here’s how it works code-wise:

✅ Method 1: By Animation ID (Recommended)

// Get timeline by the Animation ID you set in Bricks Builder
function getTimelineByName(animationName) {
    const timelineId = window.kinekt_timelines.ids.get(animationName);
    return timelineId ? window.kinekt_timelines.instances.get(timelineId) : null;
}

// Example usage
const myTimeline = getTimelineByName('Reveal Image');
if (myTimeline) {
    // Take control of the timeline
    myTimeline.pause();
    myTimeline.progress(0.5); // Jump to 50%
    myTimeline.play();
}

✅ Method 2: By Internal Timeline ID

// Get timeline directly by internal ID
function getTimelineById(timelineId) {
    return window.kinekt_timelines.instances.get(timelineId) || null;
}

// Example usage
const myTimeline = getTimelineById('reveal-image');

// List all available timeline IDs
function listAllTimelineIds() {
    return Array.from(window.kinekt_timelines.instances.keys());
}

// Wait for DOM and timelines to be ready
document.addEventListener('DOMContentLoaded', function() {
    // Give timelines time to initialize
    setTimeout(() => {
        
        // Get your specific timeline
        const myAnimation = getTimelineByName('Hero Fade-in');
        
        if (myAnimation) {
            console.log('Timeline found:', myAnimation);
            
            // Custom control examples:
            
            // 1. Pause the timeline
            myAnimation.pause();
            
            // 2. Control with custom triggers
            document.getElementById('play-btn').addEventListener('click', () => {
                myAnimation.play();
            });
            
            document.getElementById('reverse-btn').addEventListener('click', () => {
                myAnimation.reverse();
            });
            
            // 3. Jump to specific progress
            document.getElementById('progress-slider').addEventListener('input', (e) => {
                const progress = e.target.value / 100; // 0-1
                myAnimation.progress(progress);
            });
            
            // 4. Chain with other animations
            myAnimation.eventCallback('onComplete', () => {
                console.log('Animation completed!');
                // Trigger another animation
                const nextAnimation = getTimelineByName('Next Animation');
                if (nextAnimation) nextAnimation.play();
            });
            
            // 5. Modify timeline properties
            myAnimation.timeScale(0.5); // Play at half speed
            myAnimation.delay(2); // Add 2 second delay
            
        } else {
            console.warn('Timeline "Hero Fade-in" not found');
            // List available timelines for debugging
            console.log('Available timelines:', Array.from(window.kinekt_timelines.ids.keys()));
        }
        
    }, 1000); // Wait 1 second for initialization
});

// Helper function (same as above)
function getTimelineByName(animationName) {
    const timelineId = window.kinekt_timelines.ids.get(animationName);
    return timelineId ? window.kinekt_timelines.instances.get(timelineId) : null;
}

// Access the main controller for advanced operations
const kinektMain = window.kinekt_timelines;

// Recreate a timeline if needed (useful for dynamic content)
function recreateTimeline(animationName) {
    const timelineId = kinektMain.ids.get(animationName);
    if (timelineId) {
        const config = kinektMain.configs.get(timelineId);
        if (config) {
            // The plugin has a recreateTimeline method
            // This would require accessing the main object methods
            console.log('Timeline config available for recreation:', config);
        }
    }
}

// Monitor timeline states
function getTimelineState(element) {
    return kinektMain.elementStates.get(element);
}