Tool Breakdown : Show/Hide Timer

The Show/Hide Timer is a simple but powerful tool that lets us stage elements in a way that can tell a story. It's a surprisingly sophisticated tool that pops anything within the gif canvas in and out of existence whenever a timer expires. Under the hood there is actually a lot going on:

the modalCount property tells us how many jsPlumb instances are available for the gif canvas and we set them to manage all of our timers here.

window.modalCount = window.modalCount || 0; // Initialize a counter for modal instances

if (typeof window.jsPlumbInstances === 'undefined') {
    window.jsPlumbInstances = new Map();
}

if (!window.jsPlumbInstances.has('showhide')) {
    window.jsPlumbInstances.set('showhide', new Map());
}

The createTimerWidgetModal function is where the magic begins:

function createTimerWidgetModal() {
    window.modalCount++;
    const modalId = `timer-widget-modal-${window.modalCount}`;
    const containerId = `timer-widget-container-${window.modalCount}`;

    // Dynamically create the modal and its container
    let $timerWidgetModal = $('<div>', { 
        id: modalId, 
        title: 'Show/Hide Timer'
    }).appendTo('body');

    let $widgetContainer = $('<div>', { 
        id: containerId 
    }).appendTo($timerWidgetModal);

    // Initialize selections array for this modal and attach it
    let selectionsForThisModal = [];
    $timerWidgetModal.data('selections', selectionsForThisModal);

    // Ensure a jsPlumb instance for this 'showhide' app type
    let showhideInstances = window.jsPlumbInstances.get('showhide');
    let jsPlumbInstance = jsPlumb.getInstance({ Container: $widgetContainer });
    showhideInstances.set(modalId, jsPlumbInstance);

    // Setup the modal dialog UI and interactions
    setupModalDialog($timerWidgetModal, $widgetContainer, modalId, selectionsForThisModal);
}

...the rest of the code goes on to setup a modal dialog with selections for the modal. As you can see selectionsForThisModal is empty at first. Once a selection is added to a modal, a jsPlumb connection is attached and a selection is added to the array. The modal is capable of handling multiple selections at a time. When the timers are started all the selections will run in sequence one after another.

Using the tool

The Show/Hide Timer is a tool that can be added to the gif.com.ai toolbar. Once you pin it to the toolbar you can use it to hide any element in your gif canvas. Let's revisit a step by step of how to do this.

First add one or more elements to the gif canvas that you want to show or hide. Once inside the canvas click the plus button to add the Show/Hide tool to the toolbar from the tools menu.

Select the time you want to complete the action, the action to complete - Show or Hide, and then the target of that action.

Multiple actions can be added to create an alternating action sequence. In this case the actions alternate between showing and hiding the element after the interval selected.

Try out the Timer tool on https://gif.com.ai