Hide Image

Description#

'hide image <image_id> [at <position>] [with <animation> [classes] [properties]]'

The hide image action removes an image from the screen. The image must have been previously shown using Show Image.

Action ID: Hide::Image

Reversible: Yes

Requires User Interaction: No

Parameters#

Properties#

Examples#

Basic Hide#

Remove an image immediately without animation:

'hide image flower'

Hide with Animation#

Remove with an exit animation:

'hide image flower with fadeOut'

Hide with Duration#

Control how long the animation takes:

'hide image flower with fadeOut duration 3s'

Hide with Position Change#

Move the image before hiding:

'hide image flower at right with slideOutRight'

Using Filename#

If the image wasn’t declared as an asset:

'hide image flower.png with fadeOut'

Animation Behavior#

When hiding with an animation:

1. The image’s data-visibility attribute is set to invisible
2. The animation plays
3. Once the animation ends, the element is removed from the DOM

This ensures the animation completes before the image disappears.

Complete Example#

monogatari.assets('images', {
    'flower': 'flower.png',
    'butterfly': 'butterfly.png'
});

monogatari.script({
    'Start': [
        'show scene garden with fadeIn',
        'show image flower at left with fadeIn',
        'A beautiful flower blooms.',
        'show image butterfly at right with bounceIn',
        'A butterfly comes to visit!',
        // Hide with different animations
        'hide image butterfly with zoomOut duration 1s',
        'The butterfly flies away.',
        'hide image flower with fadeOut duration 2s',
        'The flower wilts.',
        'end'
    ]
});

Related Actions#

• Show Image - Display an image on screen
• Hide Character - Remove a character sprite
• Show Scene - Change background (also removes all images)