Web Animation.

Animation on websites has three jobs. It gives feedback: a button that reacts slightly when tapped confirms the input. It provides orientation: a menu that slides in from one direction shows where it comes from and where it will disappear to. And it tells a story: a sequence of steps that appear one after another as you scroll explains a process more clearly than a static image. Animation that fulfils none of these jobs is decoration — and costs attention and loading time.

Technically, the range stretches from simple CSS transitions to complex scenes. CSS transitions and animations are enough for hover effects, menus and fade-ins. Libraries such as GSAP control timelines and scroll-linked sequences precisely. SVG is suited to drawn lines, icons and diagrams in motion. WebGL enables three-dimensional effects and particle systems but requires considerably more computing power and careful optimisation.

Performance is the critical point. Animations feel smooth when they change only properties such as transform and opacity, because the browser can render them without recalculating the layout. Animating width, height or position forces the browser into expensive calculations and causes stuttering on weaker smartphones. Heavy animation libraries should only be loaded when they are needed, so that they do not burden the initial page load or Interaction to Next Paint.

Accessibility is part of it. Some people react to strong motion with dizziness or nausea. Operating systems therefore offer a 'Reduce motion' setting, which websites should respect via the CSS media query prefers-reduced-motion: animations are then shortened or replaced by simple cross-fades. Content must never be conveyed through animation alone.