Motion Effects
An entrance animation played as the gallery scrolls into view.
Motion Effects animates the gallery arriving. It's a one-time entrance, not an ongoing behaviour — different from Hover Animations, which fire whenever a pointer lands on a tile.
The controls
Open Motion Effects in the inspector.
| Control | What it does | Default |
|---|---|---|
| Entrance Animation | Which animation to play. | None (Default) |
| Animation Speed | How long it runs, 0–5 s in steps of 0.1. (Appears once an animation is chosen.) | 1 s |
| Animation Delay | How long to wait before starting, 0–5 s in steps of 0.1. | 0 s |
Not available on two layouts
Thumbnails and Perspective don't show this panel. A slider and a continuously looping marquee already own their items' transforms, so an entrance animation would fight them.
The animations
The dropdown is grouped, so you can find a family rather than scroll a flat list of forty.
| Group | Animations |
|---|---|
| Fading | Fade In, Fade In Down, Fade In Left, Fade In Right, Fade In Up |
| Zooming | Zoom In, Zoom In Down, Zoom In Left, Zoom In Right, Zoom In Up |
| Bouncing | Bounce In, Bounce In Down, Bounce In Left, Bounce In Up |
| Sliding | Slide In Left, Slide In Left Big, Slide In Right, Slide In Right Big, Slide In Down, Slide In Down Big, Slide In Up, Slide In Up Big |
| Rotating | Rotate In, Rotate In Down Left, Rotate In Down Right, Rotate In Up Left, Rotate In Up Right |
| Flipping | Flip, Flip X, Flip Y |
| Rolling | Roll In |
| Other | Flash, Pulse, Rubber Band, Shake, Head Shake, Swing, Tada, Wobble, Jello, Light Speed In |
Choosing one
Fading is the one that's almost always right. Fade In Up in particular reads as "content arriving as you scroll" without announcing itself.
Zooming and Sliding are stronger. They suit a hero gallery near the top of a page; on a gallery halfway down an article they're a lot.
Bouncing, Rotating, Flipping and Rolling are decorative. Use them for a deliberately playful design, on a small gallery.
The Other group is mostly attention animations — Shake, Wobble, Jello, Tada. They were built to draw the eye to something that changed, not to introduce content. A gallery that shakes itself on arrival is rarely what anyone wants.
Speed and delay
Animation Speed of 0.6–1 s covers most cases. Under 0.3 s the animation barely registers; over 2 s the visitor is waiting for your gallery to finish being clever.
Animation Delay is the one to use sparingly. Any delay is time the visitor spends looking at nothing. It earns its keep when a gallery follows a heading that has its own animation, so the two arrive in sequence rather than together — 0.2–0.3 s is plenty.
Things worth knowing
It plays once, when the gallery comes into view. Not on page load, and not again when the visitor scrolls back.
The keyframes are a separate download. A page with no animated gallery doesn't fetch them.
Respect reduced motion. Visitors who've asked their operating system for less motion get a reduced treatment. That's a floor, not permission — if the animation carries meaning, the meaning has to survive without it. Accessibility →
One animated element per screenful. Several galleries all animating in at once reads as a page that can't sit still.
Motion Effects vs Hover Animations
| Motion Effects | Hover Animations | |
|---|---|---|
| When it fires | Once, as the gallery scrolls into view | Every time a pointer or keyboard focus lands on a tile |
| What it animates | The gallery arriving | One tile responding |
| Where it's set | Motion Effects panel | Image & Video Settings → Style |
| Available on | Five layouts | All seven |
They're independent — you can have both.