--- area: "Learn" parent: "Learn" url: "https://unpoly.com/learn/motion" --- # Motion Unpoly can animate a fragment update: the old content fades or slides out while the new content comes in. You pick a motion effect by name in an HTML attribute, or define your own with a few lines of JavaScript. Users who have asked their system to reduce motion get instant updates instead. Unpoly has two kinds of motion effects. A _transition_ morphs an old element into its new version. An _animation_ plays on a single element that has no counterpart, like a new list item or an opening overlay. ## Transitions {#transitions} When a fragment is swapped, a transition animates the change. Set an [`[up-transition]`](https://unpoly.com/api/up-transition.md) attribute on a link or form: ```html Next story ``` When the response arrives, the old `#story` moves out to the left while the new one moves in from the right. Unpoly ships with transitions like `cross-fade` and `move-left`, and you can combine any two animations into a new transition. ## Animations {#animations} Some updates have no old element to morph from: appending to a list, opening an overlay, or removing an element. These play an animation on the new or departing element: ```html Load more ``` The new items fade in below the existing ones. To animate any element from JavaScript, call [`up.animate()`](https://unpoly.com/api/up.animate.md). ## Controlling motion {#controlling-motion} You can change the duration and easing of every motion effect, per element or for the whole app, and users who prefer reduced motion see no motion at all: ```html Next story ``` ## See also {#see-also} To change the default animations of overlays, see [Customizing overlays: Open and close animations](https://unpoly.com/learn/customizing-overlays.md#animation).