Hide Image

Remove an image from the screen

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

Name	Type	Description
image_id	string	The asset ID or filename used when showing the image
position	string	Optional. CSS class for repositioning before hiding
animation	string	Optional. Exit animation from Animate.css
classes	string	Optional. Additional CSS classes
properties	string	Optional. Properties like duration

Properties

Property	Description
duration	Sets animation-duration CSS property. Format: duration <time> (e.g., duration 2s)

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)