Swipe to Delete

An element follows the pointer when dragged and can be limited to an area or an axis.

Add a "Drag" interaction (also called draggable or drag constraints) to [where].
The element should follow the pointer directly while dragged, stop at the edges of its allowed area, and spring back to its resting place with a small bounce when released.
Make it work with touch as well as a mouse without the page scrolling underneath, and offer a keyboard way to move it.

Items fade and slide in when added and animate out when removed while neighbours close the gap.

Add a "List Item Enter/Exit" animation (also called an animated list) to [where].
A new item should first open up its space and then fade and slide in; a removed item should fade out first and then collapse so its neighbours close the gap smoothly.
Keep a removed item in place until its exit has finished, so the list never jumps when items are added or removed.

Cards pile with slight offsets and the top card moves away to reveal the next.

Add a "Card Stack" (also called stacked cards) to [where].
Pile the cards with slight offsets behind one another; each press should swing the top card away to the side and tuck it in at the back, while the rest step forward: smooth with a light, quick feel.
Make it work by keyboard, let screen readers reach every card in order, and use a simple fade for users who prefer reduced motion.

A round knob slides along a track and the track color changes between off and on.

Add a "Toggle Switch" animation (also called a switch) to [where].
When it is turned on or off, the round knob should slide smoothly to the other end of the track while the track color changes: quick and crisp, with no bounce.
Keep it a real accessible switch (role="switch" with its checked state) that also works with the keyboard.

The product image shrinks and flies along an arc into the cart icon.

Add an "Add to Cart Fly" animation (also called fly to cart or add-to-cart animation) to [where].
When the add button is pressed, a small copy of the product image should shrink as it flies along a smooth, quick arc into the cart icon, and the cart should give a small bump as its count updates.
Play it once per press without moving the original product card, and skip the flight for users who prefer reduced motion while still updating the cart.

A checkmark is drawn stroke by stroke inside the box when it is ticked.

Add a "Checkbox Check Draw" animation (also called an animated checkbox or checkmark draw) to [where].
When the box is ticked it should fill with color and the checkmark should draw itself in one quick, smooth stroke; unticking erases it the same way.
Keep it a real checkbox with its checked state, working with the keyboard and a visible focus ring.