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.

Image Effect component - Google Web Designer

To use the image effect component:

1. Open the Components panel, then the Graphics and effects folder.

2. Double-click the image effect component, or drag it to the stage.

3. Double-click the component on the stage, or click the settings button in the Properties panel. The image effect dialogue opens.

4. Drag an image to the dialogue stage, or click Choose images to select an image.

5. Choose the image effect type that you want from the drop-down in the properties panel.

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. Customise 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 ticked, stops auto-playing 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 dialogue. Open the dialogue 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 images button to switch the base image and the revealed image.
Revealed	The image shown below or to the right of the divider. Use the Swap images button 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. 1 causes a sharp transition, while larger values blur the edges.
Interaction	When the Follow mouse box is ticked, the divider follows the mouse cursor.
Animation
Auto-play	When the Auto-play box is ticked, the animation starts when the component loads.
Initial state
Position	The starting position of the divider when the animation begins.
Delay	The amount of time before the animation starts auto-playing, 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. 0 causes 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 images button to switch the base image and the revealed image.
Revealed	The image revealed by the focus area. Use the Swap images button 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 ratio button to maintain the aspect ratio when you change a radius.
Feathering	The softness of the focus area's edge. 0 gives the focus area a sharp edge, while larger values blur the edge of the focus area.
Effect	When the Stay revealed box is ticked, the revealed image stays visible after the focus area moves.
Animation
Auto-play	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. 0 causes no animation, while larger values cause the animation to play faster.
Interaction	When the Follow mouse box is ticked, 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. 0 causes no animation, while larger values cause the animation to play faster.
Magnitude	The strength of the waves. 0 causes 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 Reverse box is ticked, waves move from left to right (for the horizontal orientation) or from bottom to top (for the vertical orientation).
Trimming	When the Trimming box is ticked, 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
Auto-play ended	Sent when the auto-playing 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 dialogue, set the image effect component or the specific effect as the receiver.

Find out how to configure events.

Preview

While you're working in the image effect dialogue, 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 Save at the bottom of the dialogue, then clicking the Preview button.