The Gesture component

This component is not supported for Google Ads, Google AdMob, or AMPHTML 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:

  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 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.

Was this helpful?
How can we improve it?