Component APIs

360° Gallery

gwd-360gallery

A gallery object that shows an object rotating.

Properties

Name	Description
images:string	A comma-separated string of image paths used in the gallery.
autoplay:boolean	The gallery should automatically play through the images in the gallery after the gallery loads.
wrap:boolean	The gallery should allow the user to swipe around from the first frame to the last, instead of stopping at the ends.

Events

Name	Description
firstinteraction	Sent when the user interacts with the gallery for the first time.
allframesviewed	Sent when all frames of the gallery are shown at least once.
allframesloaded	Sent when all frames of the gallery are loaded.
frameshown	Sent when a new frame is shown.
frameactivated	Sent when a new frame has started to be activated, even if it's not yet visible.
frametap	Sent when the user taps on a frame.

Methods

Name	Description
goToFrame(frame:number, opt_animate:string, opt_direction:string)	Animate to the frame specified.
rotateOnce(opt_duration:number, opt_direction:string)	Rotate the object in the gallery once.
goForwards()	Moves gallery forwards by one frame.
goBackwards()	Moves gallery backwards by one frame.

3D Hotspot

gwd-3d-hotspot

An element for displaying annotations on a 3D model.

Properties

Name	Description
data-position:string	The hotspot's position.
data-normal:string	The hotspot's normal.
hotspot-name:string	The hotspot's name.
hotspot-title:string	The title text to display in the info card.
hotspot-description:string	The description text to display in the info card.
hide-infocard:boolean	Whether the info card should be hidden.

3D Hotspot Container

gwd-3d-hotspot-container

A container element for annotations on a 3D model.

Properties

Name	Description
up-image:file	The URL for the image of the 3D hotspots in the unpressed state.
over-image:file	The URL for the image of the 3D hotspots in the mouseover or hover state.
down-image:file	The URL for the image of the 3D hotspots in the pressed state.

3D Model

gwd-3d-model

A 3D viewer component.

Properties

Name	Description
id-url:download	The ID or URL of the 3D model.
data-gwd-refresh-assets:string	Attribute used by Google Web Designer to determine if the 3D assets must be refreshed.
glass:boolean	Enables the glass material for the 3D model.
src:string	Model to display.
transparent:boolean	Enables transparent background on the 3D model.
gesture-cue-icon:file	The gesture cue icon.
gesture-cue-text:string	The text displayed below the gesture cue icon.
gesture-cue-duration:number	The duration (in seconds) to display the gesture cue. A value of -1 signifies no time limit.

Events

Name	Description
scene-rendered	Sent after the 3D model scene is rendered for the first time.
camera-changed	Sent when any of the 3D camera properties changes. The event.detail object contains all the current properties of the camera.
hotspot-clicked	Sent when a hotspot is clicked. The event.detail object contains the name of the hotspot clicked.
interaction-start	Sent when the user starts interacting with the 3D model.
interaction-end	Sent when the user stops interacting with the 3D model.

Methods

Name	Description
setYaw(yaw:number)	Sets the yaw angle (in degrees), without any animation, taking into account camera limits.
setTargetYaw(targetYaw:number)	Sets the target yaw angle (in degrees) based on either camera limits or flooring the rotation between -360 and 360 degrees.
setTargetPitch(targetPitch:number)	Sets the target pitch angle (in degrees).
incrementTargetPitch(pitchDelta:number)	Increments the target pitch of a delta angle (in degrees).
setTargetZoom(targetZoom:number)	Sets the target zoom (in meters).
incrementTargetZoom(zoomDelta:number)	Increments the target zoom (in meters).
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number)	Sets the target pivot (in meters).
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number)	Sets the target local pan (in meters).
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number)	Sets the material color.
playAnimation(animationName:string)	Plays the animation.
pauseAnimation(animationName:string)	Pauses the animation.
setAnimationTime(animationName:string, animationTime:number)	Sets the animation time (in seconds).
lookAtHotspot(hotspotName:string)	Moves and rotates the camera to focus on the hotspot.

3D Model Viewer

gwd-3d-model-viewer

A component that wraps the 3D model viewer component.

Properties

Name	Description
src:file	The 3D model's source file.
gesture-cue-icon:file	The gesture cue icon.
gesture-cue-text:string	The text displayed below the gesture cue icon.
gesture-cue-duration:number	The duration (in seconds) to display the gesture cue. A value of -1 signifies no time limit.
skybox-image:file	The background image of the 3D model scene.
environment-image:file	Controls the environmental reflection of the 3D model.

Events

Name	Description
scene-rendered	Sent after the 3D model scene is rendered for the first time.
camera-changed	Sent when any of the 3D camera properties changes. The event.detail object contains all the current properties of the camera.
hotspot-clicked	Sent when a hotspot is clicked. The event.detail object contains the name of the hotspot clicked.
interaction-start	Sent when the user starts interacting with the 3D model.
interaction-end	Sent when the user stops interacting with the 3D model.

Methods

Name	Description
setYaw(yaw:number)	Sets the yaw angle (in degrees), without any animation, taking into account camera limits.
setTargetYaw(targetYaw:number)	Sets the target yaw angle (in degrees) based on either camera limits or flooring the rotation between -360 and 360 degrees.
setTargetPitch(targetPitch:number)	Sets the target pitch angle (in degrees).
incrementTargetPitch(pitchDelta:number)	Increments the target pitch of a delta angle (in degrees).
setTargetZoom(targetZoom:number)	Sets the target zoom (in meters).
incrementTargetZoom(zoomDelta:number)	Increments the target zoom (in meters).
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number)	Sets the target pivot (in meters).
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number)	Sets the target local pan (in meters).
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number)	Sets the material color.
playAnimation(animationName:string)	Plays the animation.
pauseAnimation(animationName:string)	Pauses the animation.
setAnimationTime(animationName:string, animationTime:number)	Sets the animation time (in seconds).

Add to Calendar

gwd-addtocalendar

Adds an event to calendars.

Properties

Name	Description
event-title:string	The event name as it will be seen in the user's calendar.
start-date:string	The date the event begins.
start-time:string	The time the event starts (in 24-hour time).
end-date:string	The date the event ends.
end-time:string	The time the event ends (in 24-hour time).
timezone:string	The time zone for the event. When this is set, the time will be adjusted correctly for the user when the user is in another time zone.
location:string	The location of the event.
description:string	The description of the event.
icalendar:boolean	Whether an iCalendar file should be used or not.
google:boolean	Whether a Google Calendar should be used or not.
windows-live:boolean	Whether a Windows Live Calendar should be used or not.
yahoo:boolean	Whether a Yahoo! Calendar should be used or not.
bg-color:string	Hexadecimal value for the background color of the dropdown.
font-color:string	Hexadecimal value for the font color of the dropdown.
font-family:string	Name for the font of the dropdown.
font-size:string	Size for the font of the dropdown.
font-weight:string	Font weight for the font of the dropdown.
highlight-color:string	Hexadecimal value for the highlight color of the dropdown.

Audio

gwd-audio

A component that wraps an HTMLAudioElement.

Properties

Name	Description
autoplay:boolean	Whether the audio should autoplay when loaded.
loop:boolean	Whether the audio should loop when completed.
muted:boolean	Whether the audio should start muted.
controls:boolean	Whether the default native player controls are enabled.
sources:file	A comma-separated string of audio sources in different formats.

Events

Name	Description
play	Sent when playback of the media starts after a prior pause event.
pause	Sent when playback is paused.
playing	Sent when the media begins to play (for the first time, after having been paused, or after ending and then restarting).
ended	Sent when playback completes.
volumechange	Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed).
seeked	Sent when a seek operation completes.
waiting	Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

Methods

Name	Description
mute()	Toggle to mute/unmute the audio.
pause()	Pauses the audio.
play()	Plays the audio.
replay()	Replays the audio.
seek(time:number)	Jumps to the specified time in the audio.

Carousel Gallery

gwd-carouselgallery

A gallery object that shows its frames on a carousel-style layout.

Properties

Name	Description
images:string	A comma-separated string of image paths used in the gallery.
groups:string	A comma-separated string of group IDs.
transition-duration:number	Gallery animation speed in milliseconds.
start-frame:number	The number of the image you want to display initially.
autoplay:boolean	Whether to autoplay the frames once or not.
has-navigation:boolean	Whether to automatically include gallery navigation controls.
navigation-thumbnails:boolean	Whether thumbnails should be used for navigation instead of dots.
navigation-highlight:color	A CSS color code used to highlight the active frame in navigation.
scaling:string	How image content will be scaled to fit its frame.
frame-width:number	The width of one content panel.
frame-height:number	The height of one content panel.
neighbor-rotation-y:number	A Y-axis rotation applied to neighbors of the currently centered panel. This is used to tilt the neighboring panels.
neighbor-translation-x:number	An X-axis translation applied to neighbors of the currently centered panel. Used to adjust placement of neighboring panels.
neighbor-translation-y:number	A Y-axis translation applied to neighbors of the currently centered panel.
neighbor-translation-z:number	A Z-axis translation applied to neighbors of the currently centered panel.
exit-urls:string	A comma-separated string of exit URLs, corresponding to the images in the the gallery.
show-reflection:boolean	Whether to show a CSS3-based reflection.
pause-front-media:boolean	When the current frame changes, whether to pause media elements (e.g., video or audio) on the previous frame.
resume-next-media:boolean	When the current frame changes, whether to resume media elements (e.g., video or audio) on the new current frame.

Events

Name	Description
firstinteraction	Sent when the user interacts with the gallery for the first time.
allframesviewed	Sent when all frames of the gallery have been shown at least once.
allframesloaded	Sent when all frames of the gallery are loaded.
autoplayended	Sent when autoplay has ended for any reason. event.detail.completed will be true if it ended naturally by reaching the intended duration elapsing, else it will be false.
frameshown	Sent when a new frame is shown.
frameactivated	Sent when a new frame has started to be activated, even if it's not yet visible.
frameautoplayed	Sent when a frame is activated for autoplay. This may trigger more often than frameshown, because it will be fired separately for each of multiple frames that are visible at once.
frametap	Sent when the user taps on a frame.
reachleftend	Sent when the gallery reaches its left end.
reachrightend	Sent when the gallery reaches its right end.
trackstart	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.
trackend	Sent when the mouse or touch drag ends.

Methods

Name	Description
goToFrame(index:number, opt_animate:string)	Go to the frame specified.
goForwards(opt_animate:string)	Go to the next frame if available.
goBackwards(opt_animate:string)	Go to the previous frame.
rotateOnce(opt_duration:number, opt_direction:string)	Show every frame in the gallery once.
stopRotation()	Halts current automatic rotation.

Cue Point

gwd-cuepoint

A component that is attached to a Google Web Designer Video component and fires an event when the video reaches a specific time.

Properties

Name	Description
time:number	The time at which the event is triggered, in seconds.

Events

Name	Description
cuepoint	Sent when playback of the media has reached a time defined in a cue point.

Methods

Name	Description
seek()	Sets the video time to a cue point’s time.
setTime(time:number)	Sets the cue point’s time.

Date Swap

gwd-dateswap

Date Swap will change the visibility of the element based on how the current date compares to the target date range.

Properties

Name	Description
from_date:string	A string representing an RFC2822 or ISO 8601 date.
to_date:string	A string representing an RFC2822 or ISO 8601 date.

Events

Name	Description
before	Sent when the current date is before the from_date (exclusive).
during	Sent when the current date is between the from_date and the to_date (inclusive).
after	Sent when the current date is after the to_date (exclusive).

Methods

Name	Description
checkDate()	Compares the current date with the date range.

Gallery Navigation

gwd-gallerynavigation

A navigation control for a Google Web Designer gallery component.

Properties

Name	Description
for:string	A comma-separated string of image paths used in the gallery.
highlight:color	A CSS color code used to highlight the active frame in navigation.
use-thumbnails:boolean	Whether thumbnails should be used for navigation instead of dots.

Generic Ad

gwd-genericad

Implements the Generic Ad container.

Events

Name	Description
adinitialized	Sent just before the Generic element renders the ad's content.

Methods

Name	Description
initAd()	Starts the ad upon receiving the appropriate events from the Enabler.
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)	Navigates to the expanded dimensions of the ad. If a page ID is not specified, the ad navigates to the default page.
exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string)	Exits the ad and optionally collapses the ad.

Gesture

gwd-gesture

Abstraction for a number of gesture events.

Properties

Name	Description
touch-action:string	How the touch action should be interpreted. Valid values are: auto, none, pan-x, and pan-y. Default behavior is the same as it is set to none.

Events

Name	Description
hover	Sent when the mouse or touch location enters the component boundary.
hoverend	Sent when the mouse or touch location leaves the component boundary.
trackstart	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.
trackend	Sent when the mouse or touch drag ends.
tap	Sent when a user tap or mouse click is registered.
swipeleft	Sent when the user swipes left.
swiperight	Sent when the user swipes right.
swipeup	Sent when the user swipes up.
swipedown	Sent when the user swipes down.

Google Ad

gwd-google-ad

Implements the Google ad container.

Properties

Name	Description
polite-load:boolean	Whether this ad must respect the polite loading semantics.
fullscreen:boolean	Whether this ad should attempt to expand fullscreen or not.

Events

Name	Description
adinitialized	Sent just before the element renders the ad's content.
expandstart	Sent when the Enabler fires expand start event.
expandfinish	Sent when the Enabler fires expand finish event.
collapsestart	Sent when the Enabler fires collapse start event.
collapsefinish	Sent when the Enabler fires collapse finish event.
fullscreensupport	Sent if fullscreen expansion is supported.
dynamicelementsready	Sent after dynamic data has been applied to the ad's content.
hostpagescroll	Sent when the Enabler fires hostpage scroll event.

Methods

Name	Description
initAd()	Starts the ad upon receiving the appropriate events from the Enabler.
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)	Navigates to the expanded dimensions of the ad. If a page ID is not specified, the ad navigates to the default page.
exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)	Exits the ad and optionally collapses the Ad.
exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)	Exits the ad to the specified URL regardless of the value defined in Studio. Collapses the ad if opt_collapseOnExit is true.
incrementCounter(metric:string, opt_isCumulative:boolean)	Tracks a counter event.
startTimer(timerId:string)	Starts an event timer.
stopTimer(timerId:string)	Stops an event timer.
reportManualClose()	Records a manual closing of a floating, pop-up, expanding, in-page with pop-up, or in-page with floating ad. This method is a proxy for Enabler.reportManualClose.

Hotspot

gwd-hotspot

A component that shows and hides a hotspot at specific times of a video.

Properties

Name	Description
show-time:number	The time at which the hotspot starts being visible, in seconds.
hide-time:number	The time at which the hotspot stops being visible, in seconds.
left:string	The left position of the hotspot above the video relative to the video frame width (e.g., '5%').
top:string	The top position of the hotspot above the video relative to the video frame height (e.g., '5%').
width:string	The width of the hotspot proportionally to the video relative to the video frame width.
height:string	The height of the hotspot proportionally to the video relative to the video frame height.

Events

Name	Description
hotspotshown	Sent when the hotspot becomes visible.
hotspothidden	Sent when the hotspot becomes hidden.

Methods

Name	Description
show(showHide:boolean)	Toggle hotspot visibility.
seek(showHide:boolean)	Set a video time to the show or hide time of the hotspot.
setTimes(showTime:number, hideTime:number)	Sets the hotspot's show and hide times.

IFrame

gwd-iframe

A component that wraps an HTMLIframeElement.

Properties

Name	Description
source:string	The source of the iframe. This replaces the src attribute on the native image element.
scrolling:string	Whether the iframe should display scrollbars.

Events

Name	Description
iframeload	Sent when the iframe is loaded.

Methods

Name	Description
setUrl(url:string)	Changes the URL of the iframe and loads it right away.

Image

gwd-image

A component that wraps an HTMLImageElement to support deferred loading of the image source.

Properties

Name	Description
source:file	The source of the image. This replaces the src attribute on the native image element.
alt:string	The alternate text for the image.
scaling:string	Defines how the image will be scaled to fit its frame.
alignment:string	How the image should align within the viewing area.
focalpoint:string	Encodes an image focal point as x/y pixel coordinates.
disablefocalpoint:boolean	Disables the focal point set by the focalpoint attribute (used internally by Google Web Designer).

Image Button

gwd-imagebutton

An image button with support for up/over/down states.

Properties

Name	Description
up-image:file	The URL for the image of the button in the unpressed state.
over-image:file	The URL for the image of the button in the mouseover or hover state.
down-image:file	The URL for the image of the button in the pressed state.
bgcolor:string	The background color of the button.
alignment:string	How the image should align within the viewing area.
scaling:string	How the image should fit in the parent container.
disabled:boolean	Whether the button should be disabled.

Events

Name	Description
imagebuttonloaded	Sent when all the images have loaded.

Methods

Name	Description
toggleEnable()	Toggles between enabled/disabled.
setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string)	Sets the image sources for all button states.

Image Effect

gwd-image-effect

An Image Effect component.

Properties

Name	Description
scaling:string	Defines how the image will be scaled to fit its frame.
time-limit:number	Animation time limit. A value of -1 signifies no time limit.
settings:string	Launches the component settings dialog.
images:string	A comma-separated string of image paths used in the image effect.

Events

Name	Description
autoplayended	Sent when autoplay is ended when the time limit is reached.

Methods

Name	Description
play()	Play the animation.
pause()	Pause the animation.

Before and After Image Effect

gwd-before-and-after

An image effect where two similar images are composited into a 'before and after' comparison.

Breathe Image Effect

gwd-breathe

An image effect which animates an image being expanded and contracted elastically.

Reveal Image Effect

gwd-reveal

An image effect where one image is scanned by an elliptical focus area revealing a second image.

Wave Image Effect

gwd-wave

An image effect which applies an animated wave transform to an image, causing the image to wiggle following a wave pattern.

Map

gwd-map

Extends HTMLElement to wrap Google Maps API calls.

Properties

Name	Description
api-key:string	Google API key. See: https://developers.google.com/maps/documentation/javascript/get-api-key
query:string	Search query name for returning locations from the Google Places API.
start-latitude:decimal	Starting center latitude coordinate. Value should be between -90 and 90 (degrees).
start-longitude:decimal	Starting center longitude coordinate. Value should be between -180 and 180 (degrees).
request-user-location:boolean	Whether the user location must be requested. If set to true, the user will be prompted to share the location.
client-id:string	The Google Maps Premier Client ID
search-radius:number	Minimum radius in which to conduct a location search, in meters.
result-limit:number	The maximum number of results to return in a single query.
start-zoom:number	Starting zoom level, in units used by the Google Maps API. Default is 16, which is at the neighborhood level.
marker-src:string	Placemarker image filename, as a sprite containing the off, on, and shadow components.
gps-src:string	GPS location blue dot image filename.
msg-start-position-prompt:string	Localization string for the dialog prompt text to select a start position.
msg-gps-button-label:string	Localization string for the label of the button which retrieves a the users location from the geolocation API
msg-manual-position-button-label:string	Localization string for the label of the button which brings up a location search field.
msg-manual-position-prompt:string	Localization string for the dialog prompt text to search for a starting map position.
msg-manual-position-placeholder:string	Localization string for the placeholder text of the search box for finding a starting map position.
msg-geocode-failure:string	Localization string for the dialog prompt text shown when an attempt to use the geolocation API fails.
msg-no-results-found:string	Localization string for the dialog prompt text shown when no map results were found in the chosen location.

Events

Name	Description
pinclick	When the user selects a pin on the map.

Methods

Name	Description
setCenter(latitude:number, longitude:number, opt_accuracy:number)	Sets the center of the map to the location specified by latitude/longitude.

Page

gwd-page

A Page represents a single card in the page deck.

Properties

Name	Description
expanded:boolean	Whether this page should be considered as an expanded page (Ad specific).
centered:boolean	Whether the contents of this page should be centered.
alt-orientation-page:string	The page ID of the page that better represents this content in the alternate orientation.

Events

Name	Description
attached	Sent just after the page is attached to the DOM
detached	Sent just after the page is removed from the DOM
pageactivated	Sent when the page is ready to be displayed.
pagedeactivated	Sent when the page is no longer being displayed.
pageload	Sent after page's contents have loaded successfully.
pagepresenting	Sent just before the page begins its intro animation.
shake	Sent when a device shake gesture is detected.
tilt	Sent when a device tilt is detected.
rotatetoportrait	Sent when a device is rotated to portrait orientation.
rotatetolandscape	Sent when a device is rotated to landscape orientation.

Page Deck

gwd-pagedeck

A PageDeck is a container of pages. It shows one page at a time and different pages may be cycled to the front in any given order and using any of the supported page transitions.

Properties

Name	Description
default-page:string	ID of the default page.

Events

Name	Description
pagetransitionstart	Sent before a page transition occurs.
pagetransitionend	Sent after a page transition completes.

Methods

Name	Description
goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)	Navigates to the next page in the page deck.
goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)	Navigates to the previous page in the page deck.
goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)	Navigates to the specified page in the page deck.
getCurrentPage()	Returns the current page, or null if a page is not shown.
getDefaultPage()	Returns the default page if specified, otherwise returns the first page.
getPage(pageId:string)	Returns the page with the specified ID
findPageIndexByAttributeValue(attributeName:string, value:string|number|boolean)	Returns the page element with the value of the attribute equal to the specified value or -1 if a page was not found.
getOrientationSpecificPage(orientation:string, pageId:string)	Returns the page corresponding to the specified orientation.
getElementById(id:string)	Finds the element with the specified ID across all pages in this pagedeck. Since gwd-pagedeck only keeps the active page in the DOM, the standard document.getElementById(id) will not return the elements in the inactive pages. It is a common use case, especially in dynamic ads, to refer to elements in inactive pages. In such cases, this method can be used to dereference an element by its ID.

Parallax

gwd-parallax

A parallax component.

Properties

Name	Description
settings:string	Launches the component settings dialog.
yscroll:decimal	The scroll factor to use for the parallax animation when rendering on stage.

Events

Name	Description
ready	Sent when all the assets in the Parallax component are loaded.

Particle Effects

gwd-particleeffects

A component for compositing multiple particle effects and images.

Properties

Name	Description
autoplay:boolean	Whether to automatically play the animation when the component is loaded.
time-limit:number	Animation time limit. A value of -1 signifies no time limit.
settings:string	Launches the component settings dialog.

Events

Name	Description
timelimitreached	Sent when the animation playback has reached the given time limit.

Methods

Name	Description
play()	Play the animation.
pause()	Pause the animation.
stop()	Stop the animation.

Particles

gwd-particles

Particle system component.

Properties

Name	Description
acceleration-x:number	The x component of the acceleration in px/frame/frame.
acceleration-y:number	The y component of the acceleration in px/frame/frame.
angle-max:number	The maximum angle of the velocity direction of the particles.
angle-min:number	The minimum angle of the velocity direction of the particles.
autoplay:boolean	Whether to automatically play the animation when the parent gwd-particleeffects starts playing.
color1:color	The first color.
color2:color	The second color.
color-rate:number	The rate at which the color changes from color 1 to color 2 per frame by addition, in the range of [0, 1].
emit-interval:number	The number of frames until the next particle is emitted.
emit-x-max:string	The maximum x coordinate of the particle emission range.
emit-x-min:string	The minimum x coordinate of the particle emission range.
emit-y-max:string	The maximum y coordinate of the particle emission range.
emit-y-min:string	The minimum y coordinate of the particle emission range.
loop:boolean	Whether to loop the animation.
number:number	The number of particles.
opacity-min:number	The minimum opacity of the particles.
opacity-max:number	The maximum opacity of the particles.
opacity-rate:number	The rate at which the opacity changes per frame, which is added to a particle's current opacity.
random-colors:boolean	Whether the particles have random colors between color 1 and color 2. If false, all particles are initialized with color 1.
shape:string	The shape of the sprite.
size-max:number	The maximum size of the particles in px.
size-min:number	The minimum size of the particles in px.
size-rate:number	The rate at which the size changes per frame, which is added to a particle's current size.
skip-forward:number	Skipping to a time when a given percentage of particles have been emitted into a particle system.
speed-max:number	The maximum speed of the particles in px/frame.
speed-min:number	The minimum speed of the particles in px/frame.
sprite-image-src:file	The source of the images that are used as sprites.
turbulence-frequency:number	The frequency of the turbulence. Higher values cause more frequent irregularities in the motion. It should be a positive number.
turbulence-rate:number	The rate at which the strength changes over time.
turbulence-strength:number	The strength of the turbulence exerting on the particles. It should be a positive number.
turbulence-trail:number	How many previous and current states of a particle to render.

Methods

Name	Description
play()	Play the animation.
pause()	Pause the animation.
stop()	Stop the animation.

SpriteSheet

gwd-spritesheet

Show single keyframe or animation from spritesheet.

Properties

Name	Description
imagesource:file	The URL for the sprite sheet image.
offsetx:number	The offset, in pixels, from the left side of the sprite sheet to either: the left edge of the specific image you want to use from the sprite sheet the left edge of the first sprite image you're using to create an animation
offsety:number	The offset, in pixels, from the top of the sprite sheet to either: the top edge of the specific image you want to use from the sprite sheet the top edge of the first sprite image you're using to create an animation
clipwidth:number	The width, in pixels, of either: the specific image you want to use from the sprite sheet the first sprite image you're using to create an animation
clipheight:number	The height, in pixels, of either: the specific image you want to use from the sprite sheet the first sprite image you're using to create an animation
alignment:string	Determines the position of the image within its container.
scaling:string	Determines how various sized images are displayed within the component.
totalframecount:number	The number of frames that make up the animation.
duration:number	The duration of each frame, in milliseconds.
loopcount:number	The number of times the animation repeats. Set to 0 for infinite repeat.
autoplay:boolean	Whether the animation plays automatically.
endonstartframe:boolean	Whether the animation ends on the initial frame.
reverseplay:boolean	Whether the animation plays in reverse.

Events

Name	Description
animationend	Sent when the animation ends.
animationpause	Sent when the animation is paused.
animationplay	Sent when the animation starts to play.
animationrestart	Sent when the animation is restarted after a pause.

Methods

Name	Description
newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean)	Defines a new animation.
play()	Plays the animation.
pause()	Pauses the animation.
togglePlay()	Switch animation between play and pause.
restart()	Restarts the animation.
previousFrame()	Shows the previous frame.
nextFrame()	Shows the next frame.
goToFrame(id:number)	Shows a specific frame by frame number.

Star Ratings

gwd-starratings

A component for rendering a line of stars representing a rating.

Properties

Name	Description
ratingvalue:decimal	Rating value.
iconsize:number	Star icon size.
isemptyshown:boolean	Whether the empty star icons are shown.
isemptycolored:boolean	Whether the empty star icons are colored.
colorprimary:color	Primary fill color.
colorsecondary:color	Secondary gradient color.
gradienttype:string	Gradient type.
ratingmax:number	Maximum star ratings.
ratingmin:decimal	Minimum star ratings.

Events

Name	Description
complete	When the Star Ratings icons have been created.
validationerror	Star Ratings rating value is less than the minimum rating.

Street View

gwd-streetview

A Google Street View Component.

Properties

Name	Description
key:string	For information about obtaining a unique key for your application, see: https://developers.google.com/maps/documentation/javascript/get-api-key.
latitude:decimal	The location's latitude value.
longitude:decimal	The location's longitude value.
interaction:boolean	Whether the view can be panned/rotated.
heading:decimal	Indicates the compass heading of the camera. Accepted values are from 0 to 360 (both values indicating North, with 90 indicating East, and 180 South). If no heading is specified, a value will be calculated that directs the camera towards the specified location, from the point at which the closest photograph was taken.
pitch:decimal	Specifies the upward or downward angle of the camera relative to the Street View vehicle. This is often, but not always, flat horizontal. Positive values angle the camera up (with 90 degrees indicating straight up); negative values angle the camera down (with -90 indicating straight down).
zoom:number	Specifies the zoom of the camera relative to the Street View vehicle.

Swipeable Gallery

gwd-swipegallery

A gallery object that shows its frames in a swipeable content strip.

Properties

Name	Description
images:string	A comma-separated string of image paths used in the gallery.
groups:string	A comma-separated string of group IDs.
transition-duration:number	The gallery animation speed in milliseconds.
start-frame:number	One-based frame to start at.
num-frames-to-display:number	The number of frames to display at once.
frame-snap-interval:number	The number of frames to advance by after each swipe.
autoplay:boolean	Whether to automatically rotate the gallery once.
has-navigation:boolean	Whether to include gallery navigation controls.
navigation-thumbnails:boolean	Whether thumbnails should be used for navigation instead of dots.
navigation-highlight:color	A CSS color code used to highlight the active frame in navigation.
scaling:string	How image content will be scaled to fit its frame.
swipe-axis:string	The axis in which swipe is detected.
offset:number	The amount of empty space between adjacent content frame.
frame-width:number	The width of one content frame. Overrides num-frames-to-display.
frame-height:number	The height of one content frame.
autoplay-duration:number	The total duration for which to autoplay the frames.
autoplay-step-interval:number	The interval between each frame step during autoplay.
exit-urls:string	A comma-separated string of exit URLs, corresponding to the images in the the gallery.
disable-gesture:boolean	Hides/disables the gesture component which enables touch navigation of the gallery.
pause-front-media:boolean	When the current frame changes, whether to pause media elements (e.g., video or audio) on the previous frame.
resume-next-media:boolean	When the current frame changes, whether to resume media elements (e.g., video or audio) on the new current frame.

Events

Name	Description
firstinteraction	Sent when the user interacts with the gallery for the first time.
allframesviewed	Sent when all frames of the gallery were shown at least once.
allframesloaded	Sent when all frames of the gallery are loaded.
autoplayended	Sent when autoplay has ended for any reason. event.detail.completed will be true if it ended naturally by reaching the intended duration elapsing, else it will be false.
frameshown	Sent when a new frame is shown, after any necessary animations have completed.
frameactivated	Sent when a new frame has started to be activated, even if it's not yet visible.
frameautoplayed	Sent when a frame is activated for autoplay. This may trigger more often than frameshown, because it will be fired separately for each of multiple frames that are visible at once.
frametap	Sent when the user taps on a frame.
reachleftend	Sent when the gallery reaches its left end.
reachrightend	Sent when the gallery reaches its right end.
framemouseover	Sent when the user moves the mouse over a frame.
framemouseout	Sent when the user moves the mouse out of a frame.
trackstart	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.
trackend	Sent when the mouse or touch drag ends.

Methods

Name	Description
goToFrame(frame:number, opt_animate:string)	Goes to the frame specified.
rotateOnce(opt_duration:number, opt_direction:string)	Shows every frame in the gallery once.
stopRotation()	Halts current automatic rotation.
goForwards()	Moves gallery forwards by one frame.
goBackwards()	Moves gallery backwards by one frame.

Swirl

gwd-swirl

A Swirl component.

Properties

Name	Description
yscroll:decimal	The scroll factor to use for the swirl animation when rendering on stage.
settings:string	Launches the component settings dialog.

Events

Name	Description
ready	Sent when all child assets are loaded.

Tap Area

gwd-taparea

Abstraction for click/tap event.

Properties

Name	Description
exit-override-url:string	The URL to exit to when the Tap Area is tapped.

Events

Name	Description
action	Sent when the user touches (mobile) or clicks (desktop) the button.

Tap to Call/Text

gwd-taptocall

A component that, when clicked or touched, will call or send an SMS to the configured telephone number.

Properties

Name	Description
number:string	Telephone number to call or message.
action:string	Choose to send an SMS message or initiate a phone call.

Events

Name	Description
action	Sent when the user touches (mobile) or clicks (desktop) the button.
taptocall	Sent when a call or SMS is being initiated.

Methods

Name	Description
dial()	Initiates the call or sends an SMS message to the configured number.

Transition Gallery

gwd-transitiongallery

A transition gallery component.

Properties

Name	Description
settings:string	Launches the component settings dialog.
images:string	A comma-separated string of image paths used in the gallery.
scaling:string	Defines how the image will be scaled to fit its frame.
exit-urls:string	A comma-separated string of exit URLs, corresponding to the images in the the gallery.

Events

Name	Description
autoplayended	Sent when autoplay has ended for any reason. event.detail.completed will be true if it ended naturally by reaching the intended loop count, else it will be false.
frameactivated	Sent when a new frame has started to be activated, even if it's not yet visible.
frameshown	Sent when a new frame is shown.
frametap	Sent when the user taps on a frame.
rotateonceended	Sent when rotation has ended for any reason. event.detail.completed will be true if it ended naturally, else it will be false.
reachleftend	Sent when the gallery reaches its left end.
reachrightend	Sent when the gallery reaches its right end.

Methods

Name	Description
goToFrame(frame:number, with_animation:boolean)	Goes to the frame specified.
rotateOnce(startFromCurrentFrame:boolean)	Shows the frame in the gallery from the start frame if startFromCurrentFrame is false or unspecified, otherwise, from the current frame. The rotation stops before it reaches the start frame.
startAutoplay(startFromCurrentFrame:boolean)	Starts autoplaying in the gallery from the start frame if startFromCurrentFrame is false or unspecified, otherwise, from the current frame. The autoplay stops when it hits the loop count.
stop()	Cancels the animation if it's in progress.
goForwards()	Moves gallery forwards by one frame.
goBackwards()	Moves gallery backwards by one frame.

Blinds Transition

gwd-blinds

A blinds effect component, which reveals the new image as though from behind window blinds with slats that open one after another, starting from one edge and progressing to the opposite edge.

Properties

Name	Description
direction:dropdown	The direction of the effect.
blinds:number	The number of blinds.
transparentbackground:boolean	Whether to reveal the transparent background before rendering new image's blinds. If it is false, the blinds overlay on the old image.

Door Wipe Transition

gwd-door-wipe

A door wipe effect component is a variation of the wipe effect, with two types based on the direction of the wipe. An opening door wipe reveals the new image starting from the center of the old image, as if a double door is opening. A closing door wipe reveals the new image starting from opposite edges of the old image to the center, as if a double door is closing.

Properties

Name	Description
orientation:dropdown	The orientation of the animation.
direction:dropdown	The direction of the door wipe effect.

Fade Transition

gwd-fade

A transition fade component.

Iris Wipe Transition

gwd-iris-wipe

An iris wipe effect component, which reveals the new image with a growing circle which orginates from the center of the frame by default.

Properties

Name	Description
originpercentx:number	The origin of the growing circle in the x axis relative to the frame's width.
originpercenty:number	The origin of the growing circle in the y axis relative to the frame's height.

Push Transition

gwd-push

A push transition effect component, where the new image slides into view while pushing the old image out of view.

Properties

Name	Description
direction:dropdown	The direction of the push effect.

Radial Wipe Transition

gwd-radial-wipe

A radial wipe effect component is a variation of the wipe effect, where the new image is revealed by sweeping a radius around a specified point, like a clock hand.

Properties

Name	Description
direction:dropdown	The direction of the effect.
originpercentx:number	The origin in the x axis relative to the frame's width that starts sweeping a radius to reveal the new image.
originpercenty:number	The origin in the y axis relative to the frame's height that starts sweeping a radius to reveal the new image.

Rotate Transition

gwd-rotate

A rotate effect component, which spins the old image while zooming in, then zooms back out on the new image while completing the spin rotation.

Properties

Name	Description
direction:dropdown	The direction of the effect.

Slice Transition

gwd-slice

A slice effect component, which reveals the new image in slices or bars which slide into view one after another.

Properties

Name	Description
direction:dropdown	The direction of the slice effect.
slices:number	The number of slices or bars that split the view.
transparentbackground:boolean	Whether to reveal the transparent background before the new image slices slide in. If it is false, the slices overlay on the old image.

Split Push Transition

gwd-split-push

A split push effect component is a variation of the push effect, where the old image is split into two parts vertically or horizontally. Corresponding split parts of the new image push each part of the old image out of view in opposite directions.

Properties

Name	Description
orientation:dropdown	The orientation of the animation.

Stripe Wipe Transition

gwd-stripe-wipe

A stripe wipe effect component is a variation of the wipe effect in which solid colored stripes of alternating colors simultaneously grow on the screen to cover the old image. The stripes then shrink to reveal the new image.

Properties

Name	Description
direction:dropdown	The direction of the effect.
stripes:number	The number of stripes of each color.
color1:color	Hexadecimal value for one of the two alternating stripe colors.
color2:color	Hexadecimal value for the other alternating stripe color.

Venetian Blinds Transition

gwd-venetian-blinds

A venetian blinds effect component, which reveals the new image as though from behind venetian blinds with slats that open simultaneously or one after another.

Properties

Name	Description
orientation:dropdown	The orientation of the animation.
blinds:number	The number of blinds.
staggered:boolean	Whether the slats transition with a delay. If it is false, all the slats transition simultaneously.

Wipe Transition

gwd-wipe

A transition wipe component. In the regular wipe effect, the new image gradually replaces the old image behind a line that wipes from one edge to the opposite edge.

Properties

Name	Description
direction:dropdown	The direction of the effect.
angle:number	The angle that slants the line which replaces the old image with the new image.

Zigzag Transition

gwd-zigzag

A zigzag effect component, which reveals the new image in a snaking grid pattern. A horizontal zigzag effect reveals tiles of the new image in successive rows alternating between left-to-right and right-to-left. A vertical zigzag effect reveals tiles of the new image in successive columns alternating between top-to-bottom and bottom-to-top.

Properties

Name	Description
orientation:dropdown	The orientation of the animation.
rows:number	The number of rows of the zigzag effect.
columns:number	The number of columns of the zigzag effect.

Video

gwd-video

A component that wraps an HTMLVideoElement.

Properties

Name	Description
autoplay:boolean	Whether the video should autoplay when loaded.
loop:boolean	Whether the video should loop when completed.
muted:boolean	Whether the video should start muted.
controls:boolean	Whether the default native player controls are enabled.
sources:file	A comma-separated string of videos in different formats.
poster:string	A URL indicating a poster frame to show until the user plays or seeks.

Events

Name	Description
play	Sent when playback of the media starts after having been paused; that is, when playback is resumed after a prior pause event.
pause	Sent when playback is paused.
playing	Sent when the media begins to play (either for the first time, after having been paused, or after ending and then restarting).
ended	Sent when playback completes.
volumechange	Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed).
seeked	Sent when a seek operation completes.
waiting	Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

Methods

Name	Description
mute()	Toggle to mute/unmute the video.
pause()	Pauses the video.
play()	Plays the video.
replay()	Replays the video.
seek(time:number)	Jumps to the specified time in the video.
setVolume(volume:number)	Set the volume of the video.
setSources(sources:string)	Set the sources for the video.

YouTube

gwd-youtube

Extends HTMLElement to wrap YouTube API calls.

Properties

Name	Description
video-url:string	The YouTube URL for the video.
autoplay:string	For supported environments, the YouTube video will autoplay upon loading.
preview-duration:number	Set the duration of the preview. Used only when autoplay attribute is set to preview
controls:string	Displays the video controls (none, autohide).
color:string	The color theme of the player progress bar (red or white).
muted:boolean	Whether the video should start muted.
loop:boolean	Whether the video should loop when completed.
pause-on-end:boolean	Pauses the video when there is 1 second left.
start-position:number	Start the video at a given time (seconds).
allowfullscreen:boolean	Allow fullscreen on desktop.
extra-player-args:string	Additional YouTube player parameters as described in https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters

Events

Name	Description
buffering	The YouTube player is buffering.
ended	The YouTube video has reached the end.
paused	The YouTube video is paused.
playing	The YouTube video starts playing.
replayed	The YouTube video has been replayed.
viewed0percent	Sent when 0% of the video has been viewed.
viewed25percent	Sent when 25% of the video has been viewed.
viewed50percent	Sent when 50% of the video has been viewed.
viewed75percent	Sent when 75% of the video has been viewed.
viewed100percent	Sent when 100% of the video has been viewed.
previewed0percent	Sent when 0% of the preview has been viewed.
previewed25percent	Sent when 25% of the preview has been viewed.
previewed50percent	Sent when 50% of the preview has been viewed.
previewed75percent	Sent when 75% of the preview has been viewed.
previewed100percent	Sent when 100% of the preview has been viewed.

Methods

Name	Description
toggleMute()	Toggle to mute/unmute the video.
pause()	Pauses the video.
play()	Plays the video.
replay()	Replays the video.
seek(time:number)	Jumps to the specified time in the video.
setYouTubeId(id:string, cueOnly:boolean)	Changes the source of the YouTube video to the specified ID.