The Gesture component

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

The Gesture component lets you capture user interactions. For example, you might want to know when a user's mouse pointer hovers over a button so that you can change the button colour, or detect when a user swipes left on a page of text so that you can display the next page.

To add the Audio component to your project:

1. Open the Components panel, then the Interaction folder.
2. Drag the Gesture  component to the stage.
3. Add events to detect the gestures that you care about. The Gesture component has different events for different types of gestures.

Properties

Property	Description
Name	The component name.
Touch action	Which touch actions to pass to the browser. For example, if you don't want the Gesture component to interfere with the user scrolling vertically within the browser, you can set this property to pan-y. For most purposes, you can leave this property set to none. auto none (default) pan-x pan-y

Events and actions

Events sent by the Gesture component

You can trigger other actions based on the following Gesture component events:

Event	Description
Hover	Sent when the mouse or touch location enters the component boundary
Hover end	Sent when the mouse or touch location leaves the component boundary
Track start	Sent when the mouse or touch drag begins
Track	The component registers the X and Y location data associated with the mouse or touch drag You set what tracking data is sent in the component's Properties panel.
Track end	Sent when the mouse or touch drag ends
Tap	Sent when a mouse click or user tap is registered.
Swipe left	Sent when a user presses down then swipes to the left.
Swipe right	Sent when a user presses down then swipes to the right.
Swipe up	Sent when a user presses down then swipes upward.
Swipe down	Sent when a user presses down then swipes downwards.

To select one of these events in the Event dialogue, set the Gesture component as the target.

Learn how to configure events. 

Preview

This component can't be previewed inside the Google Web Designer interface. To see the component in action, preview your document in your preferred browser by clicking the Preview button in the upper-right corner.