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 you can change the button color, or detect when a user swipes left on a page of text so you can display the next page.
To add the Gesture component to your project:
- Open the Components panel, then the Interaction folder.
- Drag the Gesture
component to the stage.
- 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.
|
Events and actions
Events sent by the Gesture componentYou 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 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 downward. |
To select one of these events in the Event dialog, 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.
