The Image Effect component

    This component is not supported for AMPHTML ads ,  video ads , or image ads .

    The Image Effect component lets you apply a variety of JavaScript-based visual effects to an image (and in some cases, to a pair of images): Before and After , Breathe , Reveal , and Wave .

    To use the Image Effect component:

    1. Open the Componentspanel, then the Graphics & Effectsfolder.

    2. Double-click the Image EffectImage Effect component iconcomponent, or drag it to the stage.

    3. Double-click the component on the stage, or click the Settings...button in the Propertiespanel. The Image Effect dialog opens.

    4. Drag an image to the dialog stage, or click Choose imagesto select an image.

    5. Choose the image effect type you want from the dropdown in the Propertiespanel.

    6. Some effect types use two images. You can select the additional image from the Library, or browse your file system to import an image file.

    7. Customize the effect by adjusting its properties (described below ).

    Properties

    Along with properties for the entire component, you can configure properties for each effect included within the component.

    Image Effect component properties

    Property

    Description

    Name
    Sets the Image Effect component name.
    Scaling

    Determines how various sized images are displayed within the component. Learn more .

    • Resize image to fit
    • Crop image to fill
    • None
    • Stretch image to fill
    Set animation limit
    When checked, stops autoplaying the animation after the specified duration in seconds.

    Properties for each effect type

    You can access properties specific to each effect type in the Image Effect dialog. Open the dialog by double-clicking the Image Effect component on the stage or by clicking Settings...in the Properties panel, then select the effect type to see its properties.

    None

    No effect is applied to the image.

    Before and After

    The Before and After effect applies a wipe transition between two images that reverses direction once complete, then repeats.

    Property

    Description

    Images
    Base
    The image shown above or to the left of the divider. Use the Swap Imagesbutton to switch the Base image and the Revealed image.
    Revealed
    The image shown below or to the right of the divider. Use the Swap Imagesbutton to switch the Revealed image and the Base image.
    Divider
    Angle
    The angle of the dividing line between the two images, between 0 and 180 degrees. Defaults to 90(a vertical line).
    Feathering
    The softness of the images' edges along the divider. 1causes a sharp transition, while larger values blur the edges.
    Interaction
    When the Follow mousebox is checked, the divider follows the mouse cursor.
    Animation
    Autoplay
    When the Autoplaybox is checked, the animation starts when the component loads.
    Speed
    The speed of the animation.
    Hold time
    The amount of time that the animation pauses to fully display each image.
    Initial State
    Position
    The starting position of the divider when the animation begins.
    Delay
    The amount of time before the animation starts autoplaying, in seconds.
    Breathe

    The Breathe effect expands and contracts the image elastically.

    Property

    Description

    Images
    Base
    The image to apply the effect to.
    Breathe
    Speed
    The speed of the animation. 0causes no animation, while higher values cause the animation to play faster.
    Horizontal effect
    Expansion
    The magnitude of the image's horizontal expansion.
    Contraction
    The magnitude of the image's horizontal contraction.
    Vertical effect
    Expansion
    The magnitude of the image's vertical expansion.
    Contraction
    The magnitude of the image's vertical contraction.
    Hold time
    Expansion
    The amount of time that the image remains fully expanded, in seconds.
    Contraction
    The amount of time that the image remains fully contracted, in seconds.
    Curves
    Horizontal
    The number of curves created by the horizontal distortion.
    Vertical
    The number of curves created by the vertical distortion.
    Reveal

    The Reveal effect displays the corresponding part of a second image within an elliptical focus area.

    Property

    Description

    Images
    Base
    The image displayed outside of the focus area. Use the Swap Imagesbutton to switch the Base image and the Revealed image.
    Revealed
    The image revealed by the focus area. Use the Swap Imagesbutton to switch the Revealed image and the Base image.
    Focus
    Radius
    The radius of the focus area along the X-axis and Y-axis. Use the Lock radius ratiobutton to maintain the aspect ratio when you change a radius.
    Feathering
    The softness of the focus area's edge. 0gives the focus area a sharp edge, while larger values blur the edge of the focus area.
    Effect
    When the Stay revealedbox is checked, the revealed image stays visible after the focus area moves.
    Animation
    Autoplay

    The pattern of movement for the focus area.

    • Wander(default) - The focus area moves over the image at random, changing direction to stay over the image.
    • Wrapping wander- The focus area moves over the image at random, appearing on the opposite side of the image when it reaches the edge.
    • Circle- The focus area moves in a circle.
    • None
    Speed
    The speed of the focus area. 0causes no animation, while larger values cause the animation to play faster.
    Interaction
    When the Follow mousebox is checked, the focus area follows the mouse pointer.
    Wave

    Animates slices of the image in a wave pattern.

    Property

    Description

    Images
    Base
    The image to apply the effect to.
    Wave
    Type

    The waveform used in the effect.

    • Standard- The animation causes the image to ripple.
    • Lensing- The animation contracts and expands the image in a symmetrical wave pattern.
    Orientation
    The direction of the wave animation.
    • Horizontal
    • Vertical
    Speed
    The speed of the wave animation. 0causes no animation, while larger values cause the animation to play faster.
    Magnitude
    The strength of the waves. 0causes no effect, while larger values cause more dramatic waves.
    Length
    The distance between wave peaks. The shorter the length, the more waves in the effect.
    Reverse
    When the Reversebox is checked, waves move from left to right (for the horizontal orientation) or from bottom to top (for the vertical orientation).
    Trimming
    When the Trimmingbox is checked, the image is redrawn for each frame of the animation, preventing a trail effect.
    Advanced
    Wave area
    The portion of the image affected by the wave effect.
    Full strength
    The portion of the image where the wave effect is at full magnitude. The magnitude of the effect tapers in other parts of the wave area.

    Events and actions

    Events sent by the Image Effect component

    You can trigger other actions based on the following Image Effect component event:

    Event Description
    Autoplay ended Sent when the autoplaying animation reaches the animation time limit.
    Actions performed by the Image Effect component and by each effect

    The following Image Effect component actions can be triggered in response to other events:

    • Play
    • Pause

    When you select one of these actions in the Event dialog, set the Image Effect component or the specific effect as the receiver.

    Learn how to configure events .

    Preview

    While you're working in the Image Effect dialog, the stage shows you how the component appears while it's animated. If you change any properties, the animation resets to the beginning.

    You can also preview your document in your preferred browser by clicking Saveat the bottom of the dialog, then clicking the Previewbutton.

    Was this helpful?

    How can we improve it?

    Need more help?

    Try these next steps:

    Post to the help community Get answers from community members
    true
    ©2026 Google
    Enable Dark Mode
    Search
    Clear search
    Close search
    Google apps
    Main menu
    5252049795935063439
    true
    Search Help Center
    false
    true
    true
    true
    true
    true
    5050422
    false
    false
    false
    false
    false
    Create a Mobile Website
    View Site in Mobile | Classic
    Share by: