Motion

An infinite marquee loops a row so the end meets the start without a visible jump.

An infinite parallax slider is a looping strip you still use to pick an item, with layers that shift at different rates as it moves.

A draggable slider lets people drag a row until one item is current, then rest there.

A circular slider puts choices on a ring.

A process line that fills to the step you are on.

An expanding strip is a bar that grows along one axis to reveal extra items or a small panel, without covering the whole page.

A card fan is a small stack that spreads into an arc so each face can be seen at once.

An image follow list is a list of names or titles where one preview tracks the pointer as it moves along the rows.

A hoverable list is a still list where each row reacts on hover or focus, so people can compare items without opening a new view.

An infinite draggable grid is a field of items you can drag in x and y, wrapping so the set never shows an edge.

A mega menu opens a wide panel of grouped links from a nav item, so a large set can be scanned without leaving the header.

A fullscreen slide menu covers the viewport with the nav, then gets out of the way so the page can be used again.

A morphing pill menu keeps a short list of peers in view and moves a pill or highlight from the last item to the next.

A magnetic button eases a little toward the pointer, then settles back when you leave.

A background fill button keeps the control still and changes the fill on hover, usually from one edge, so the press lands where people aimed.

A circle fill button grows a circular fill from where the pointer enters, then covers the control.

A curve fill button paints the hover state with a curved edge that sweeps across the control.

An icon button is a button with no visible text.

A tooltip is a short, non-interactive label that appears when someone hovers or focuses a control.

Accordion motion is the open and close: the panel eases to its height, the chevron turns, and the rows below shift rather than jump.

A morphing accordion is an accordion whose panels open and close on a height, so the page reflow is visible instead of a snap.

Morphing tabs keep the usual tab rules and add one piece of motion: the active mark travels from the old label to the new one, instead of blinking on.

A morphing dialog is a modal that appears to grow from the control that opened it, then returns there on close.

A custom cursor hides the system pointer and draws one of your own that follows it.

A progress cue shows how far through a page, a section or a short task someone has moved, usually as a thin bar, a line or a ring that fills as they go.

A hide header slides the top bar away as someone scrolls down, then brings it back as soon as they scroll up, so the page gives reading room without losing the nav.

Parallax moves stacked layers at different speeds as the page scrolls, so a foreground travels further than a background and the scene reads with a little depth.

An element reveal brings a whole block onto the page as it enters the viewport: a card, an image, a section, the unit rather than the words inside it.

Background colour shifts the page tint as someone moves from section to section, so a change of scene is felt in the whole view rather than only in the heading.

A mask reveal uncovers a block through a crop, a wipe or a shaped hole, so the image or section is there the whole time and the mask is what moves.

A flip zone takes one element, usually an image or a short clip, and fits it into a sequence of frames as the page scrolls, so the same object changes slot, size and crop instead of a new picture arriving each time.

A flip filter rearranges a grid when someone picks a category, so the tiles that remain slide into their new slots instead of popping, and the ones that leave have a short exit.

An image trail leaves a short run of pictures behind the pointer as it moves, then lets them fade.

A 3D card flip turns a card around its centre so the reverse can be read, then turns it back.

A text reveal shows a line as you scroll, one word or one block at a time.

A text scramble fills a line with random characters, then lets the real word settle in.

A typewriter adds letters in reading order, often with a caret, so the line looks as if someone is still typing it.

A dual scramble runs a shuffle on two strings at once, usually an outgoing label and an incoming one, so a swap feels like a decode rather than a cut.

Popping text brings each character in with a scale, so the letters bounce to rest rather than fading or typing.

Character appear brings each letter onto the page on its own, on a stagger, so the word assembles rather than arriving as a block.

Cinematic text reveals a line through a crop, a mask, or a slow rise, with more theatre than a product heading usually wants.

Folding text opens a line around an edge, as if the words were on a card, so the heading arrives by turning into place.

A rectangle text reveal uncovers a line with a box, so the heading arrives because a rectangle moved, not because the letters did.

Text on a path places a short line on a curve, and sometimes slides it along that curve, so the words follow a shape you have drawn.

A word that breaks in the middle as a block grows between the halves.

A quiet pulse that travels through the letters and back again.

A word that becomes another word in place, letter by letter.

A rule that draws in from the left on hover, then leaves from the right.

A counter ticks a number from a start value to its final figure, usually once, when the statistic enters the viewport, so the number arrives rather than sitting there from the first paint.

An SVG draw path traces a stroke from one end to the other, so a line, a signature or a simple figure appears to draw itself rather than popping in as a finished shape.