The Effects library

Effects are live finishes that play on your published site: a picture that breaks into cells under the pointer, words that roll on a button, a field of dots that follows the mouse. The Effects library holds all of them, each card a still that comes alive while you point at it.

Use it when a layer should react to the visitor rather than simply move. For motion tied to scrolling, see While scrolling and Appear on scroll.

Open the library

• Select a layer and open the Prototype tab. Press + next to Effects (Browse effects).
• With nothing selected, the Prototype tab shows four effects under Effects. Click one, or press +, to open the full library.

The library is filed in three groups: Generative, Distort and Hover. Type in Search effects to find one by name or by what it does. Cards marked New arrived recently.

Effect	Group	Goes on
Dither	Generative	Anything but text, lines, arrows and notes
Glitch	Distort	A picture: an image, or a layer with an image fill
Pixel distortion	Distort	A picture
Bulge	Distort	A text or a picture
Letter roll	Hover	A text, or a button with words
Scramble	Hover	A text, or a button with words
Fill wipe	Hover	A button, a frame, a stack or a rectangle

Add an effect

There are three ways:

1. Click a card to add the effect to every selected layer that can take it. The toast says which layers got it, and how many could not.
2. Drag a card onto a layer on the canvas. It goes on the innermost layer under the pointer that can take it.
3. Drag a card onto empty canvas, or the empty space of a frame, to start from nothing. Dither makes a new 480 by 320 rectangle to fill; Glitch, Pixel distortion and Bulge place a sample picture with the effect on it. Replace the picture whenever you like.

Letter roll and Scramble dropped on a button built as a frame go on the button’s one text. A card the selection cannot take is dimmed, and says why.

The library stays open while you work on the canvas, so you can select the next layer and click the next card.

Change or remove an effect

Every effect a layer has is a row in Effects in the Prototype tab. The row’s strip of small cards switches it to another effect of the same family (one hover effect for another, one picture effect for another), with that effect’s own settings.

Press − on a row to remove the effect. Nothing asks: ⌘Z brings it back.

Select several layers and Effects shows the effects they all share. A change there is made on every one of them, in one Undo. An effect only some of them have is edited one layer at a time.

Watch it on the canvas

The canvas shows each effect’s first frame, as it looks the moment the page opens. To see it move, select the layer and press play at the top right of the selection; a chip with the effect’s name stops it. Every effect plays in Preview and on your published site.

Catches

• A layer takes each effect once. Adding a second Glitch to the same picture says “It already has Glitch”.
• Letter roll and Scramble move the same letters, so a layer takes one of them. Remove the other first.
• Fill wipe needs a fill. It goes on the button, not on its text.
• Without WebGL, or for people who ask for less motion, the picture shows as it is and nothing moves.
• A hover effect never plays on a touch screen. There is no pointer to hover with.

Effects are on every plan. To take them outside uxdeck as code, use the site export (Pro): see Export code, PNG and SVG.