Interaction Panel

• Interaction Panel
  • Toggled Text Section
  • Interaction Section
  • Hover Style & Transform Section

Interaction Panel

The Design mode Interaction panel is accessed by selecting a layer via the Canvas or Layers sidebar, and in the Right Sidebar clicking the Design icon ¹ to enter Design Mode. Then click the Interaction tab icon ² to open the Interaction panel.

Through the Interaction panel you set how a layer responds to the visitor's pointer. It sets the cursor shown over the layer, a motion the layer performs as the pointer approaches, and a second style the layer takes on while the pointer is over it, with its own colors, border, filters, transform and shadows.

The panel divides into three sections. Toggled Text holds alternative text for a Text layer. Interaction holds the cursor and the pointer motion. Hover Style & Transform holds the hover style, and is only offered while Interaction is on.

The Slide Background has no pointer interaction, so the panel is empty when it is selected.

Toggled Text Section (Toggle)

In the Toggled Text section give a Text layer a second text that a click switches it to, and a second click switches back. Use the section toggle to turn the second text on and off.

Toggled Content (Text Area)

Enter the second text for the layer. Clicking the layer switches it from its own text to this one, and clicking it again switches it back.

Interaction Section (Toggle)

In the Interaction section set whether the layer responds to the pointer at all, which cursor is shown over it, and a motion it performs as the pointer moves nearby. Use the section toggle to turn pointer interaction on and off.

With Interaction off the layer ignores the pointer entirely. It shows no cursor of its own, performs no motion, and the Hover Style & Transform section is removed from the panel.

Cursor Icon (Tab Select)

Set the cursor shown while the pointer is over the layer. Each of the twelve cells shows an icon of a system cursor, and holding the pointer over a cell changes the pointer to that cursor.

Options:

• _Inherit: The layer uses the cursor of the element it sits in, which is the default.
• _Auto: The browser chooses the cursor from the content under the pointer.
• _Arrow: The standard arrow.
• _Pointer: The pointing hand used over links.
• _Text: The I-beam used over selectable text.
• _Move: The four-way arrow used for dragging.
• _Crosshair: A thin cross.
• _Help: An arrow with a question mark.
• _Wait: The busy indicator.
• _{Zoom In}: A magnifier with a plus sign.
• _{Zoom Out}: A magnifier with a minus sign.
• _Hidden: No cursor is shown over the layer.

Cursor Motion (Image Select)

Set a motion the layer performs in response to nearby movement of the pointer. Each tile plays its motion as a preview. The tiles are spread over four pages, and the dots below them switch between the pages.

Every motion shares the same controls, Strength, Radius, Speed and Return, which appear below the tiles once a tile other than None is chosen. Choosing a tile loads its own starting values into those controls.

Options:

• _None: The layer does not move.
• _Magnet: The layer moves toward the pointer while the pointer is within the Radius.
• _{Snap To Cursor}: The layer moves to the pointer's position and follows it.
• _{Slow Drift}: The layer moves toward the pointer slowly, over a wide Radius.
• _{Lean In}: The layer tilts toward the pointer.
• _{Sideways Only}: The layer moves with the pointer along one axis only, set with Axis.
• _Stretch: The layer is stretched toward the pointer.
• _Taffy: The layer is stretched toward the pointer and returns with an elastic motion.
• _Pop: The layer scales up quickly when the pointer comes within the Radius.
• _Swell: The layer scales up slowly while the pointer is within the Radius.
• _Shy: The layer scales down and moves away as the pointer comes closer.
• _Recoil: The layer moves away from the pointer and returns with an elastic motion.
• _Repel: The layer moves away from the pointer.
• _Skittish: The layer moves away from the pointer quickly and returns with a bouncing motion.
• _{Card Tilt}: The layer tilts in three dimensions toward the pointer.
• _{Deep Tilt}: The layer tilts in three dimensions toward the pointer, further than Card Tilt does.
• _Swing: The layer rotates from side to side as the pointer moves past it.
• _Wobble: The layer rotates from side to side as the pointer moves past it, and returns with an elastic motion.

Strength (Number, range)

Set the size of the chosen Cursor Motion, that is how far the layer moves, scales or tilts. The value can also be set by dragging left and right on the field.

Options:

• ₀: Minimum. The layer does not move.
• ₁₅₀: Maximum. The layer moves, scales or tilts as far as the motion allows.

Radius (Number, pixels, range)

Set the distance from the layer within which the pointer triggers the Cursor Motion. The value can also be set by dragging left and right on the field.

Options:

• _20px: Minimum. The motion starts when the pointer is within 20 pixels of the layer.
• _800px: Maximum. The motion starts when the pointer is within 800 pixels of the layer.

Speed (Number, range)

Set how quickly the layer moves in response to the pointer. Higher values make the layer move at the pointer's speed, and lower values make it move more slowly than the pointer. The value can also be set by dragging left and right on the field.

Options:

• ₂: Minimum. The layer moves most slowly behind the pointer.
• ₄₀: Maximum. The layer moves at the pointer's speed.

Return (Dropdown)

Set how the layer returns to its original position once the pointer leaves its Radius.

Options:

• _Smooth: The layer returns to its original position without passing it.
• _Overshoot: The layer passes its original position once before stopping on it.
• _Elastic: The layer passes its original position several times, each time by less, before stopping on it.
• _Bounce: The layer bounces on its original position several times before stopping on it.

Axis (Dropdown)

Set the directions the layer is allowed to move in when it responds to the pointer.

Options:

• _Both: The layer moves horizontally and vertically.
• _Horizontal: The layer moves left and right only.
• _Vertical: The layer moves up and down only.

Perspective (Number, pixels, range)

Set the perspective distance for the three dimensional tilt. A short distance makes the tilt look stronger, and a long distance makes it look flatter. The value can also be set by dragging left and right on the field.

Options:

• _200px: Minimum. The tilt looks strongest.
• _3000px: Maximum. The tilt looks flattest.

Hover Style & Transform Section (Toggle)

In the Hover Style & Transform section give the layer a second style that it takes on while the pointer is over it. The layer animates from its normal style to the hover style when the pointer moves over it, and back again when the pointer moves off it. Use the section toggle to turn the hover style on and off.

The section groups its settings into Style, Filters, Animation, Text Shadow and Box Shadow. Each hover setting mirrors a setting in the Style panel or the Extra Style panel, and sets the value that setting takes while the pointer is over the layer.

Style Section

Use the settings in the Style section to set the colors, text decoration and border the layer shows while the pointer is over it. Which settings appear depends on the type of layer selected.

Reset Style (Button)

Clear every setting in the hover Style section back to its default, so the layer's colors, text decoration and border no longer change on hover. The button appears at the right of the Style heading while the cursor is over it.

Keep Original Colors (Toggle)

Set whether the SVG graphic keeps the colors from its original file, or allows them to be modified. This is the same setting as Keep Original Colors in the Style panel, so changing it here changes it there as well.

Options:

• _On: The SVG's colors are drawn from the original file, and the hover color settings for the SVG are removed.
• _Off: Settings appear to set the SVG's fill and stroke on hover.

SVG Color (Color Swatch)

Displays the fill color the SVG graphic takes on while the pointer is over it. Click the color swatch to open a Color Picker and set a new hover SVG Color.

Stroke Color (Color Swatch)

Displays the stroke color the SVG graphic takes on while the pointer is over it. Click the color swatch to open a Color Picker and set a new hover Stroke Color.

Stroke Width (Number, range)

Set the width of the SVG's stroke while the pointer is over it. Numbers smaller than 1 can be used. The value can also be set by dragging left and right on the field.

The stroke width is relative to the original size of the graphic rather than absolute, so a stroke of 1 on a small graphic that has been scaled up can appear thick.

Options:

• ₀: Minimum. No stroke is visible.
• ₅₀₀: Maximum. The thickest stroke available.

Dash Array (Number)

Set the dash length the SVG's stroke takes on while the pointer is over it. Any number higher than 0 converts the stroke into a dashed line, and the higher the number, the longer the dashes and the gaps between them.

Animating from one dash length to another while the pointer is over the layer is what produces a moving dashed line.

Dash Array Offset (Number, range)

Set where the dashes start along the stroke while the pointer is over the layer, once Dash Array is higher than 0. A different offset from the normal style moves the dashes around the shape as the pointer arrives. The value can also be set by dragging left and right on the field.

Options:

• _-100: Minimum. The dashes are shifted furthest backward along the stroke.
• ₁₀₀: Maximum. The dashes are shifted furthest forward along the stroke.

Text (Color Swatch)

Displays the color the text takes on while the pointer is over the layer. Click the color swatch to open a Color Picker and set a new hover Text color.

Text Deco. (Dropdown)

Set a line drawn on the text while the pointer is over the layer.

Options:

• _None: No line is drawn.
• _Overline: A line is drawn above the text.
• _Underline: A line is drawn below the text.
• _{Line Through}: A line is drawn through the middle of the text.

BG (Color Swatch)

Displays the background color the layer takes on while the pointer is over it. Click the color swatch to open a Color Picker and set a new hover BG color.

Gradient Anim. (Dropdown)

Set how the background changes to the hover BG color when either color is a gradient.

Options:

• _Slide: The new background moves in across the layer.
• _Fade: The new background fades in over the old one.

Border (Color Swatch)

Displays the border color the layer takes on while the pointer is over it. Click the color swatch to open a Color Picker and set a new hover Border color.

Border Style (Dropdown)

Set the style of border the layer shows while the pointer is over it.

Options:

• _None: No border is applied on hover.
• _Solid: A single, unbroken border.
• _Dotted: A dotted line border.
• _Dashed: A dashed line border.
• _Double: Two unbroken lines.
• _Groove: A 3D grooved border.
• _Ridge: A 3D ridged border.
• _Inset: A 3D inset border.
• _Outset: A 3D outset border.

Border Width (Number, pixels)

Set the width of the border on each side of the layer while the pointer is over it, in the order top, right, bottom, left. To set all four sides to the same width, toggle the lock icon before making changes.

Border Radius (Number, pixels)

Set the rounding of each corner of the layer while the pointer is over it, in the order top left, top right, bottom right, bottom left. To set all four corners to the same radius, toggle the lock icon before making changes.

The corners are rounded on hover whether or not a border is visible.

Filters Section

Use the settings in the Filters section to blur, desaturate or brighten the layer while the pointer is over it. Each value can also be set by dragging left and right on its field.

Blur (Number, pixels, range)

Set how much the layer is blurred while the pointer is over it.

Options:

• ₀: Minimum. The layer is sharp.
• ₅₀₀: Maximum. The layer is blurred beyond recognition.

Grayscale (Number, percentage, range)

Set how much of the layer's color is removed while the pointer is over it.

Options:

• ₀: Minimum. The layer keeps its full color.
• ₁₀₀: Maximum. The layer is fully black and white.

Brightness (Number, percentage, range)

Set how bright the layer is while the pointer is over it. 100% is the layer's normal brightness, lower values darken it and higher values lighten it.

Options:

• _0%: Minimum. The layer is fully black.
• _500%: Maximum. The layer is at five times its normal brightness.

Animation Section

Use the settings in the Animation section to set how the layer animates into its hover style, and the transform, opacity and stacking order it takes on while the pointer is over it. Each numeric value can also be set by dragging left and right on its field.

Duration (Number, milliseconds, range)

Set how long the layer takes to animate from its normal style to its hover style, and back again.

Options:

• _0ms: Minimum. The hover style is applied instantly.
• _100000ms: Maximum. The longest transition available.

Easing (Dropdown)

Set the easing curve applied to the transition into the hover style, which sets how the change speeds up and slows down rather than running at a constant rate.

Options:

• _Back.easeIn
• _Back.easeOut
• _{Back.easeInOut}
• _{Bounce.easeIn}
• _{Bounce.easeOut}
• _{Bounce.easeInOut}
• _Circ.easeIn
• _Circ.easeOut
• _{Circ.easeInOut}
• _Cubic.easeIn
• _{Cubic.easeOut}
• _{Cubic.easeInOut}
• _{Elastic.easeIn}
• _{Elastic.easeOut}
• _{Elastic.easeInOut}
• _Expo.easeIn
• _Expo.easeOut
• _{Expo.easeInOut}
• _Linear
• _{Power0.easeIn}
• _{Power0.easeOut}
• _{Power0.easeInOut}
• _{Power1.easeIn}
• _{Power1.easeOut}
• _{Power1.easeInOut}
• _{Power2.easeIn}
• _{Power2.easeOut}
• _{Power2.easeInOut}
• _{Power3.easeIn}
• _{Power3.easeOut}
• _{Power3.easeInOut}
• _{Power4.easeIn}
• _{Power4.easeOut}
• _{Power4.easeInOut}
• _{QIcons.easeIn}
• _{QIcons.easeOut}
• _{QIcons.easeInOut}
• _Quad.easeIn
• _Quad.easeOut
• _{Quad.easeInOut}
• _Quart.easeIn
• _{Quart.easeOut}
• _{Quart.easeInOut}
• _Quint.easeIn
• _{Quint.easeOut}
• _{Quint.easeInOut}
• _Sine.easeIn
• _Sine.easeOut
• _{Sine.easeInOut}
• _{Strong.easeIn}
• _{Strong.easeOut}
• _{Strong.easeInOut}
• _Late
• _Late2
• _Late3

zIndex (Number, range)

Set the stacking order the layer takes on while the pointer is over it. A higher number brings the layer in front of layers with lower numbers, so a hovered layer can be shown in front of the layers next to it.

Options:

• _auto: The layer keeps its normal stacking order on hover.
• ₀: Minimum. The layer sits behind every layer with a higher value.
• ₅₀₀₀: Maximum. The layer sits in front of every other layer.

Opacity (Number, range)

Set the opacity the layer takes on while the pointer is over it.

Options:

• ₀: Minimum. The layer is fully transparent.
• ₁: Maximum. The layer is fully opaque.

scaleX (Number, range)

Set the horizontal scale of the layer while the pointer is over it, as a multiplier of its normal width.

Options:

• ₀: Minimum. The layer is squashed to nothing horizontally.
• ₁₀: Maximum. The layer is ten times its normal width.

scaleY (Number, range)

Set the vertical scale of the layer while the pointer is over it, as a multiplier of its normal height.

Options:

• ₀: Minimum. The layer is squashed to nothing vertically.
• ₁₀: Maximum. The layer is ten times its normal height.

skewX (Number, degrees, range)

Set the horizontal skew of the layer while the pointer is over it, slanting its vertical edges.

Options:

• _-100: Minimum. The layer is slanted furthest to the left.
• ₁₀₀: Maximum. The layer is slanted furthest to the right.

skewY (Number, degrees, range)

Set the vertical skew of the layer while the pointer is over it, slanting its horizontal edges.

Options:

• _-100: Minimum. The layer is slanted furthest downward.
• ₁₀₀: Maximum. The layer is slanted furthest upward.

Rotate X (Number, degrees, range)

Set the rotation of the layer around its horizontal axis while the pointer is over it, tipping the top of the layer toward or away from the viewer.

Options:

• _-5000deg: Minimum. The furthest rotation backward.
• _500deg: Maximum. The furthest rotation forward.

Rotate Y (Number, degrees, range)

Set the rotation of the layer around its vertical axis while the pointer is over it, turning one side of the layer toward the viewer.

Options:

• _-5000deg: Minimum. The furthest rotation to the left.
• _5000deg: Maximum. The furthest rotation to the right.

Rotate Z (Number, degrees, range)

Set the flat rotation of the layer while the pointer is over it, spinning it clockwise or counterclockwise on the slide.

Options:

• _-5000deg: Minimum. The furthest rotation counterclockwise.
• _5000deg: Maximum. The furthest rotation clockwise.

Origin X (Number, percentage, range)

Set the horizontal position of the point the hover transform pivots around, as a percentage of the layer's width. 50% is the center of the layer.

Options:

• _-2500%: Minimum. The pivot sits far to the left of the layer.
• _2500%: Maximum. The pivot sits far to the right of the layer.

Origin Y (Number, percentage, range)

Set the vertical position of the point the hover transform pivots around, as a percentage of the layer's height. 50% is the center of the layer.

Options:

• _-2500%: Minimum. The pivot sits far above the layer.
• _2500%: Maximum. The pivot sits far below the layer.

Origin Z (Number, percentage, range)

Set the depth of the point the hover transform pivots around, in front of or behind the layer. 50% places it on the layer's own surface.

Options:

• _-2500%: Minimum. The pivot sits far behind the layer.
• _2500%: Maximum. The pivot sits far in front of the layer.

Animation Under Mask (Toggle)

Set whether the hover transform is clipped to the layer's own box, so any part of the layer that moves or scales outside it is hidden.

Options:

• _On: The hover animation is masked to the layer's box.
• _Off: The hover animation can extend past the layer's box.

Disable on Mobile (Toggle)

Set whether the hover style is switched off on mobile devices, where there is no pointer to hover with and the style would otherwise be applied on touch.

Options:

• _On: The hover style is not applied on mobile devices.
• _Off: The hover style is applied on every device.

Text Shadow Section (Toggle)

In the Text Shadow section cast one or more shadows from the layer's text while the pointer is over it. A layer with no text shadow in its normal style fades the shadow in when the pointer moves over it, and fades it out again when the pointer moves off it. Use the section toggle to turn the hover text shadow on and off.

Several shadows can be stacked to build up a more complex result. Each value can also be set by dragging left and right on its field.

X (Number, pixels, range)

Offset the hover text shadow horizontally.

Options:

• _-50px: Minimum. The shadow sits furthest to the left of the text.
• _50px: Maximum. The shadow sits furthest to the right of the text.

Y (Number, pixels, range)

Offset the hover text shadow vertically.

Options:

• _-50px: Minimum. The shadow sits furthest above the text.
• _50px: Maximum. The shadow sits furthest below the text.

Blur (Number, pixels, range)

Soften the edge of the hover text shadow.

Options:

• _0px: Minimum. The shadow has a hard, sharply defined edge.
• _100px: Maximum. The shadow is diffused into a soft haze.

Shadow Color (Color Swatch)

Set the color of the hover text shadow. Click the color swatch to open a Color Picker. Partly transparent colors produce a more natural result than solid ones.

Add Level (Button)

Add another hover text shadow, with its own X, Y, Blur and Shadow Color, stacked over the ones already present. Once more than one level exists each is labelled with its number.

Remove Level (Button)

Delete the hover text shadow level it sits on. The last remaining level cannot be removed this way, so turn Text Shadow off instead to clear the hover shadow entirely.

Box Shadow Section (Toggle)

In the Box Shadow section cast one or more shadows from the layer's outer box while the pointer is over it. A layer with no box shadow in its normal style fades the shadow in when the pointer moves over it, and fades it out again when the pointer moves off it. Use the section toggle to turn the hover box shadow on and off.

Several shadows can be stacked to build up a more complex result. Each value can also be set by dragging left and right on its field.

X (Number, pixels, range)

Offset the hover box shadow horizontally.

Options:

• _-50px: Minimum. The shadow sits furthest to the left of the layer.
• _50px: Maximum. The shadow sits furthest to the right of the layer.

Y (Number, pixels, range)

Offset the hover box shadow vertically.

Options:

• _-50px: Minimum. The shadow sits furthest above the layer.
• _50px: Maximum. The shadow sits furthest below the layer.

Blur (Number, pixels, range)

Soften the edge of the hover box shadow.

Options:

• _0px: Minimum. The shadow has a hard, sharply defined edge.
• _100px: Maximum. The shadow is diffused into a soft haze.

Spread (Number, pixels, range)

Grow or shrink the hover box shadow relative to the size of the layer, before any blur is applied.

Options:

• _-20px: Minimum. The shadow is drawn in from the layer's edges.
• _40px: Maximum. The shadow is expanded out past the layer's edges.

Shadow Color (Color Swatch)

Set the color of the hover box shadow. Click the color swatch to open a Color Picker. Partly transparent colors produce a more natural result than solid ones.

Add Level (Button)

Add another hover box shadow, with its own X, Y, Blur, Spread and Shadow Color, stacked over the ones already present. Once more than one level exists each is labelled with its number.

Remove Level (Button)

Delete the hover box shadow level it sits on. The last remaining level cannot be removed this way, so turn Box Shadow off instead to clear the hover shadow entirely.