scatter-image - Vaadin Add-on Directory

**[ This description is mirrored from README.md at [github.com/gthmb/scatter-image](https://github.com//gthmb/scatter-image/blob/v0.0.17/README.md) on 2019-05-22 ]** [](https://www.webcomponents.org/element/gthmb/scatter-image) # \ Applies a rendering effect to an `` tag that breaks the image into pieces, scatters, and then reconsitutes them. The `` tag goes in the `image` slot. [Demo](https://www.webcomponents.org/element/gthmb/scatter-image/demo/demo/index.html) ## Default usage ```html ``` ## Getting fancy ```html ``` ## Alt fancy ```html ``` ### Configuration Attributes | Attribute | Description | Type | Default | | --------- | ----------- | ---- | ------- | | `duration` | The time, in milliseconds, allotted for the animation to complete. | `Number` | `1000` | | `resolution` | The size, in pixels, of the individual chunks of the image. The smaller the resolution the more chunks there are. Adjust as necessary based on image size, performance considerations and/or awesomeness | `Number` | `10` | | `scatter-on-tap` | Enables a tap on the image or canvas to start a new scatter effect. | `Boolean` | `false` | | `scatter-distance` | The maximum distance, in pixels, that an individual chunk will start from it's destination. | `Number` | `150` | | `no-trails` | Will clear the canvas on each tick of the animation, which removes the the trailing effect an animating piece will leave as it moves. This generally allows the background to be more distinct during the animation. | `Boolean` | `false` | | `no-background` | Hides the img tag during animation, removing the image as a background during the animation. | `Boolean` | `false` | | `composite-operation` | Defines the composite operation the canvas should use to while rendering the animation. If a compositeOperation is defined, animation trails are disabled. For current valid values, @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation | `String` | `null` | ### Read Only, Reflected Attributes. | Attribute | Description | Type | Default | | --------- | ----------- | ---- | ------- | | `loading` | Reflects the loading state of the image. True means the image is being loaded. | `Boolean` | `false` | | `drawing` | Reflects the drawing state of the animation. True means the the animation is in progress. | `Boolean` | `false` | | `complete` | Reflects if the drawing has completed | `Boolean` | `false` | Built with Polymer 2.0

scatter-image version 0.0.1
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.10
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.11
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.12
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.13
### Dependencies Polymer/polymer#^2.0.0 * resize-aware##1.9.1

scatter-image version 0.0.2
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.3
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.4
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.5
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.6
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.7
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.8
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.9
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.14
### Dependencies Polymer/polymer#^2.0.0 * https://github.com/gthmb/resize-aware.git#v2.0.alpha

scatter-image version 0.0.15
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.16
### Dependencies Polymer/polymer#^2.0.0 * mlisook/resize-aware#^2.0.0

scatter-image version 0.0.17
### Dependencies Polymer/polymer#^2.0.0 * mlisook/resize-aware#^2.0.0