The Moving Website: Motion Design as Your Brand's Language

Shoreditch, today. The sky is that flat, uniform grey that in London doesn't signal anything — it's not raining, it's not clearing up, it simply is. A grey that doesn't soak you but stays with you, like a quiet colleague who never bothers you but never quite disappears either. I'm walking along the red brick streets of Old Street with my usual coffee in hand, I find a spot I know, open the MacBook. I'm scrolling through the site of a local creative agency. It's not simply scrolling. It's a physical experience. As my fingers move across the trackpad, the elements don't just appear — they're born, they breathe, they shift according to a logic that feels almost gravitational. Liquid storytelling. In that moment I feel that familiar buzz — that feeling that the web is no longer a sheet of digital paper, but a living organism. I wasn't reading the site. I was quite literally living it.

Then, a temporal short-circuit. My mind slips back nearly thirty years. We're in Portici, late nineties. The office looks out over the seafront, the air smells of salt and warm tarmac. The sound is the crackling, almost heroic noise of a 56k modem trying to connect to the world. On the cathode ray monitor, Macromedia Flash is open. On the desk, next to a small cup of espresso — short and bitter, no question — are the Hillman Curtis manuals. I still have them, covers a little faded but the smell of the paper intact. Curtis — American designer and filmmaker, 1961–2012, former design director at Macromedia itself before founding his studio in New York — used to say something that seemed like heresy then and reads like gospel now: "Motion is narrative." He wrote this in his Flash Web Design: The Art of Motion Graphics in 2000. One of the first motion design manuals for the web ever published. If you don't know it, track it down — it's still enlightening, even now that Flash has been dead for years.

Back then, with Flash, we felt like gods. We had the timeline, we had tweens, we had the absolute freedom to move objects through a space whose only limits were those of our own imagination. I remember hours spent syncing an audio file with a vector animation, working as team leader on the development of the first Italian e-learning platform — including a full multimedia English language course — at a time when the rest of the web was built from grey tables and animated GIFs spinning on themselves like mad tops. Alongside Flash we used Dreamweaver for structure, JavaScript and its very earliest frameworks, the odd Java applet when the client wanted something particularly complex. Then jQuery arrived in 2006: a library that finally let us manipulate the DOM and add interactivity to any site, regardless of Flash. It was the first bridge between the world of designer-animators and that of developers. For roughly ten years, 70% of Italian websites used jQuery for every dynamic effect that didn't require Flash. It was the glue holding the web together.

Flash, though, was our promised land. It was the gestural freedom of someone who can draw with time. Then, as we all know, that dream shattered. But it didn't die. It simply evolved, changed its skin and its code. Today that magic goes by the names CSS, GSAP, Motion. The drawing board disappeared beneath lines of code, but the principle remains the same: movement communicates first, and better, than words. If your brand isn't moving in 2026, it simply isn't speaking.

When Steve Jobs signed Macromedia's death certificate

Flash's end was no accident. It was a planned execution, carried out with surgical precision. If I had to picture it, I'd reach for a scene from a noir thriller: a dark room, a single sharp blow, and a killer who doesn't bother hiding.

On the 29th April 2010, Steve Jobs published an open letter of 1,700 words entitled "Thoughts on Flash". That was the first blow — the fatal one. Jobs didn't mince his words. He dismantled the platform across six technical points: it was a closed, proprietary system belonging to Adobe (which had acquired Macromedia in 2005), it devastated battery life on mobile devices, it was a security sieve — Symantec had already flagged it in 2009 as one of the worst software platforms for security on the market — and, crucially, it didn't support touch. Flash had been designed for the mouse. Hovers and rollovers, that ballet of interactions that happened when you moved a cursor over a button, simply didn't exist on an iPhone screen. Adobe tried to fight back, accused Apple of anti-competitive behaviour, even got the FTC involved. But the battle was already lost in practice.

The second blow came from outside: mobile exploded. Between 2008 and 2012, web traffic from mobile devices went from marginal to dominant. If you didn't run on iPhone, you didn't exist. While in Caserta I was still trying to explain to clients why their "nicely animated" site wouldn't open on their brand-new mobile, half their potential customers were staring at a white screen.

The third blow came from inside the browsers. Chrome, Firefox, and Safari began adopting HTML5, CSS3, and native JavaScript. Suddenly, everything that had previously required a heavy, unstable plugin could be done with open standards and superior performance. When YouTube announced its definitive switch to HTML5, we knew it was all over. Adobe officially capitulated only in 2017, announcing the final discontinuation for 31st December 2020. On that date, twenty years of digital creativity were frozen in place. FreeHand had already been cannibalised by Illustrator. Dreamweaver was a shadow of its former self. Flash was history.

There's an honest nostalgia in all of this. Flash had enormous flaws. But it also had a quality that we still struggle to recapture today: gestural freedom. Working on the timeline was like practising a craft. You moved objects through space and time with your hands — or near enough. Its death was necessary for the health of the web — like a drastic pruning to let the tree grow — but that sense of creative omnipotence is something we still miss. The good news is that today, in 2026, we have tools that Flash couldn't have dreamt of, capable of weaving movement into the very DNA of code without sacrificing speed or security.

The language of movement: what's actually under the "web animation" umbrella

Today, when we talk about motion design applied to the web, we often risk muddling everything together. For many people, "animating a site" means making headlines fly in or having photos appear with a fade effect. But any professional knows that movement is a layered language — a vocabulary to be used with the precision of a surgeon. It's not about "prettying things up"; it's about guiding perception.

CSS Transitions

The atomic level. That change of state in an element — a colour that fades, a button that expands slightly, a shadow that appears — occurring over a defined period of time. Typically 0.2–0.4 seconds. Handled directly by the browser, hardware-accelerated, and light on memory. If your site doesn't even have these, it feels like a cold corpse at the user's touch.

CSS Animations via @keyframes

Here we build sequences. It's no longer simply a move from A to B, but a journey with precisely defined intermediate stages. A logo that pulses, a loader spinning while content loads, text entering with a precise rhythm. Again: all without JavaScript, without external libraries, with excellent performance.

Micro-interactions

Immediate feedback in response to user actions. The heart that fills with red on a like, the progress bar that advances, the form field border that turns orange if the email address isn't valid. I covered this in depth in the dedicated article — I'll point you there for the full breakdown.

Scroll Animation

The real revolution of recent years. Movement is tied to the user's position on the page: reveal effects (elements that appear as you scroll), parallax scrolling (layers moving at different speeds to create depth), scroll-triggered timelines (animated sequences that unfold as you scroll — Apple's signature approach), pinning (an element stays fixed while the rest of the page continues to scroll, emphasising its importance).

Advanced Hover States

Well beyond a simple colour change on :hover. In 2026 we're talking about custom cursors that change shape or size based on context, magnetic effects (the button that draws the cursor towards its centre), hidden content reveals that appear on mouse-over, typographic distortions that warp text on hover with CSS 3D effects. This is the language of creative studios in Shoreditch — less common on Italian sites, but being adopted rapidly by the more forward-thinking agencies.

Page Transitions

The animations that fire during a page or section change. The aim is to maintain narrative continuity: rather than jumping abruptly from one URL to another, the user "flies" between sections in a fluid motion. Technically, in modern contexts such as Next.js or Nuxt.js (the React and Vue frameworks used by most advanced agencies), these require specific management of the component lifecycle and libraries like Motion or GSAP to orchestrate the entry and exit sequences.

Motion Identity

The most strategic level of all. Your brand has a colour palette, a typeface, a tone of voice. But how does it move? Is it sharp and nervous like a fintech startup in Shoreditch, or slow, fluid, and elegant like a fashion atelier in Naples? Motion identity means that all the animations across your digital ecosystem share the same rhythm, the same characteristic easing, the same acceleration curve. This is where a brand becomes as memorable in movement as it is in form.

Summary Table — The 7 Faces of Motion Web

The tools of the trade in 2026: from Flash ActionScript to GSAP

If Flash was a Renaissance workshop where a single craftsman did everything, today's motion design landscape is a high-precision production line. There's no longer one magic piece of software. There's an ecosystem of tools to be chosen according to the objective, the budget, and — above all — the performance we want to guarantee the user. Because an animation that slows your site down is an animation that's costing you money.

Pure CSS — the non-negotiable starting point

If you can do it without JavaScript, do it without JavaScript. The transform and opacity properties are hardware-accelerated: the browser delegates them directly to the GPU without burdening the main processor. There's a precise technical term for the opposite error — layout thrashing — which occurs when we animate properties such as width, height, top, or left. In that case the browser is forced to recalculate the entire geometry of the page at every single frame of the animation, often 60 times a second. The result is an imperceptible but constant judder that degrades the user experience and tanks your Google Core Web Vitals score. The practical rule is simple: always animate transform and opacity. Never touch top, left, width, or height for animation.

The most significant development of 2025–2026 is the arrival of native CSS scroll-driven animations. Via the animation-timeline: scroll() and view-timeline properties, we can now create parallax effects, scroll reveals, and entire animated sequences synchronised with the user's position on the page — all in pure CSS, zero JavaScript, with excellent performance because everything is handled directly by the browser. Support is now solid across Chrome, Firefox, and Safari. This paradigm shift is making the heavy plugins that were the only practical option until recently partially obsolete. A designer who doesn't know these properties in 2026 is working with three-year-old tools.

GSAP (GreenSock Animation Platform) — the professional's choice

The industry veteran, with roots stretching back to the Flash era — many of us were using its ActionScript libraries twenty years ago. GSAP is framework-agnostic: it works with vanilla HTML, React, Vue, Angular, any stack. It's the tool for those who won't accept compromise. Compressed bundle of roughly 26 KB. The ScrollTrigger plugin has become the world standard for advanced scroll animations — millimetre-precise synchronisation between scroll position and animation timeline, pinning, scrubbing, batch processing for hundreds of elements. The MorphSVG plugin morphs vector shapes from one into another. SplitText animates text word by word, or letter by letter.

An important note: since 2023 GSAP has been owned by Webflow. It remains freely accessible to all developers for the majority of use cases, but some advanced plugins require a specific commercial licence. Check before kicking off a client project.

Motion (formerly Framer Motion) — the modern choice for React

A word on naming: this library was called Framer Motion until it became independent from Framer and adopted the name Motion. In 2026 it counts roughly 39 million weekly downloads on npm — the most downloaded library in the React ecosystem. It's open source, MIT licence. Declarative API: you don't tell the library every single step of the movement, you describe the final result and it calculates the optimal transition. Perfect for layout animations, exit animations (when a component leaves the page), gesture-based interactions, and page transitions in Next.js.

An important limitation: it works natively in React. The bundle is heavier than GSAP (34–46 KB compressed). For scroll timelines with hundreds of elements animating simultaneously, GSAP maintains a measurable performance advantage.

The complete toolbox: vanilla CSS and native APIs

Before importing any library, a good developer explores the native territory. The Intersection Observer API detects when an element enters or leaves the viewport — the foundation for reveal effects without libraries, with performance superior to the old systems based on the scroll event. The Web Animations API (WAAPI) is now supported by all modern browsers and is a lightweight alternative to GSAP for medium-complexity cases. requestAnimationFrame remains the reference point for custom animations that need to run in perfect sync with the display refresh rate.

Lottie and Rive — for those who think in animation, not in code

Lottie, created by Airbnb, lets you export animations made in After Effects as lightweight JSON files that run in the browser as scalable vector graphics. It's perfect for animated icons, onboarding illustrations, and branded loading animations. The limitation: the animations are pre-drawn, with limited dynamic interactivity.

Rive is the tool that today comes closest to the old dream of Flash: a visual editor where you build animations with an integrated state machine. The animation isn't a video — it's a piece of logic that responds to user input in real time. It's growing rapidly among the most advanced product design teams in London and Manchester. If you want to understand where web motion design is heading over the next five years, keep an eye on Rive.

Spline solves the problem of interactive 3D without forcing anyone to learn Three.js or WebGL: a drag-and-drop editor in the browser, with export as a React component or iframe embed. We use it ourselves, for certain product landing pages where visual impact is part of the message — and I can tell you that the reaction from clients the first time they see a 3D object responding to their mouse makes the learning curve entirely worthwhile.

Quick-reference tool guide

Three lessons from the giants and one textbook mistake

Watching how the big players use motion design is a fundamental exercise — not to copy them, but to understand the principles that turn an animation into a sales tool rather than an expensive bauble.

Apple — the benchmark (and the trap)

Apple's product pages are the most cited case study in the world for scroll-triggered animations. When they launch a new iPhone, the product page is a film. The product rotates slowly as you scroll. Specifications appear with millimetre-precise timing. Every frame is an editorial decision. The lesson is that movement serves the product narrative — it's not there to make you say "ooh", it's there to make you understand how the titanium chassis is made or how powerful the new chip is.

The trap for SMEs. Those sites are heavy. Apple can afford to sacrifice a bit of speed for emotional impact because it has a brand built of steel. For an SME in Caserta or Salford fighting to climb Google's rankings, blindly copying Apple can be SEO suicide: Core Web Vitals don't forgive slow load times, and one extra second of waiting can cost 7% of conversions, according to Google's own data.

Stripe — animation that explains

Stripe handles payments, invisible money flows, complex API architectures. How do you make the invisible visible? With movement. Their animations literally show how money passes from customer to gateway to seller in milliseconds — they're not decorative, they're educational. Every moving element answers an implicit question the user has in their head: "But how does it actually work?" Motion design here replaces three paragraphs of technical documentation and makes them comprehensible in two seconds.

The lesson: if your product or service is complex, animation is your best ally for explaining "how it works". This holds just as true for a business management software firm in Santa Maria Capua Vetere as it does for a fintech platform in Canary Wharf.

Lusion — the portfolio as manifesto

Lusion is a digital creative agency based in London and New York that regularly appears among the most awarded sites on Awwwards. Their site isn't a portfolio — it's a demonstration of capability. WebGL, 3D interactivity, a scroll that behaves in completely unexpected ways. Every project loads with theatrical transitions. The case studies are narrative experiences, not PowerPoint presentations.

The lesson for Italian designers: for a creative agency, the website is the most important project you'll ever build. If you have clients in Shoreditch or you want to attract them from Manchester, your portfolio simply cannot afford to be ordinary. Bobby, who runs his agency in Salford, knows this well: he invested in a site that demonstrates what he can do before a client reads a single line of copy.

The textbook mistake — the case that keeps repeating

A company in Campania — I won't name names, but the case is so common it's almost archetypal — had fallen in love with the "everything must move" trend. Their site was a storm: headlines flying in from different directions, rotating images, a cursor leaving a trail of little stars. Load time: 8 seconds on a standard connection. Bounce rate: 73%. They'd spent €2,700 on a site that was pushing customers away instead of drawing them in.

Diagnosis: animation without strategy. The movement had created noise, not music. They'd used technology as an end in itself rather than as a means. It's the opposite of Bobby in Salford: three animations, bounce rate at 34%. Invisible motion design — the kind you feel but that never forces you to look at it — is the most effective kind. A user should never find themselves thinking "how did they get that headline to move like that?" They should simply read that headline, because the movement guided them there without them noticing.

The golden rule: when to animate and when to stop

In my experience working across Italy and the British market, the difference between a senior designer and a junior isn't what they can do — it's what they decide not to do. The question to ask yourself before every line of animated code isn't "how do I do it?", but: "what does this animation communicate that static text can't?". If the answer is "nothing, but it looks good", that animation needs to go. Without mercy.

We say YES when:

• we need to guide attention towards a CTA or a key message

• we need to communicate a system state (loading, completion, error)

• we want to explain cause-and-effect relationships or sequential processes

• we're building narrative continuity between sections (page transition)

• the brand needs to differentiate itself from competitors using the same template

• we want to celebrate a user action with a micro-reward

We say NO when:

• the site exceeds 3 seconds of load time because of animated assets

• the animation is so intrusive it draws attention to itself rather than the content

• we have more than one main animation per screen running simultaneously

• the brand requires the communication of trust and authority (solicitors, accountants, specialist doctors) — excessive movement generates unease

• we're not respecting prefers-reduced-motion — there are people with vestibular disorders or digital motion sickness (Read the accessibility deep-dive)

The 3-level rule

I've developed a framework I use during briefing sessions with clients, whether they're based in Naples and Caserta or in Shoreditch:

Level 1 — Functional.

State animations and action-guidance only. Suited to professionals, medical practices, and manufacturing SMEs that need to convey stability and trust. Berto, with his mechanical workshop in Santa Maria Capua Vetere, needs Level 1. A smooth hover on a button, a gentle fade-in on load, nothing more.

Level 2 — Narrative.

Animations that support the brand's storytelling. Suited to e-commerce, brands with a strong visual identity, and businesses selling something that needs to be seen to be understood. This is the level we typically work at for our clients in Shoreditch and Hackney — and for the Campanian SMEs that want to stand out in the national market.

Level 3 — Immersive.

The site is itself an experience. Suited to iconic product launches or to those for whom their website is the single most powerful reference point they have. This is Lusion. Pure demonstration of technical capability. It only makes sense if your brand can sustain that promise.

Practical implementation for SMEs: what it actually costs

Let's be straight about this, because between professionals there's no point dancing around it.

Bobby in Salford already knows, before the meeting's even started, that "motion design" is a separate line on the quote. He has a dedicated budget, sets it aside, asks what's included and what isn't. He's used to it. In Manchester, in Shoreditch, in Bristol, that's just how it works: design and animation are two separate line items, with different complexity, different timescales, different costs.

Berto in Caserta, in most cases, finds out mid-project. He signed up for "the website". The website, in his mental model, includes everything — design, development, copy, photography, animations, SEO, post-launch support. One number, one signature, delivered by end of month. The idea that animations have their own specific complexity, that they require a specialist, that they carry a separate and justified cost — that idea often lands as a surprise. And not always a welcome one.

That's not Berto's fault. It's the market that taught him to think that way. But it's a conversation worth having upfront, not after the fact. The truth is that web motion design today is modular: you don't have to buy the whole factory if all you need is a single bolt.

Pure CSS — near-zero cost, high perceived value Hover effects, fade-in on load, element reveals with the new native CSS scroll-driven animations: all achievable in a few hours of work. If you're using Webflow or Elementor, many of these features are already built in. It's a minimal investment that can noticeably lift the quality of a site in a single afternoon.

Professional library (GSAP or AOS) — from £500 to £2,000 Scroll-triggered animations that tell a story, smooth transitions between sections, polished micro-interactions: this requires a dedicated front-end developer. AOS (Animate on Scroll) is a lighter and simpler library than GSAP, well-suited to medium-complexity cases. A solid day's work from a good developer.

Full motion identity — from £3,000 upwards Defining the movement rules for the entire brand, implementing them across all digital touchpoints, and exporting in Lottie for cross-platform use. A structured project that brings together strategic design and integrated development.

The advice for Berto and Bobby is the same: don't start from the technology. Start from the question — what do I want the user to feel while they're navigating? — and only then choose the level. And if the site still has issues with copy, navigation, or clear messaging, investing in animations is like putting a fresh coat of wax on a battered old Fiat Punto: it shines, but it's still a banger.

Movement never went away — it was always here

We've reached the end of this journey and I realise that, at bottom, Flash never really died. What died was its heavy architecture, its being a closed system that couldn't speak to the world changing around it. But the principle that Hillman Curtis preached in those manuals — which I still keep on my desk, alongside a copy of ActionScript 3.0 and the one I used to call my bible — Using HTML 4, Java 1.1 and JavaScript 1.2, entirely in English, bought when the internet was still a promise — is more alive than ever. Movement is narrative. Every frame is an editorial decision. Design in motion isn't an optional extra; it's a fundamental language of contemporary communication.

Today that language expresses itself through GSAP, Motion, or a simple 0.3-second CSS transition on a "Buy Now" button. The technology has become more democratic, more performant, more accessible than Flash could ever have been. But the heart of the matter remains intention. The difference between a site that moves well and one that simply moves is the same difference that separates a Kubrick film from a security camera recording. Both contain moving images. Only one tells a story worth watching.

As I close this article, the sky over Shoreditch is still there, grey and flat, as motionless as it was at the start. Nothing has changed outside the window. But the light inside the café has shifted — the afternoon has gone by while I was writing. The web today is a remarkable place, built from possibilities that thirty years ago, on the seafront at Portici, we could only dream of between one failed connection and the next. In those days you had to write code that worked on Explorer and on Netscape — two browsers scrapping like roosters in a henhouse, with different rules, different standards, different bugs. Every line of JavaScript was a gamble: it ran on one, broke on the other. You wrote workaround upon workaround, tested across different machines, and hoped for the best. Today we have open standards, browsers aligned, tools we would have considered science fiction back then. We have the means to make our brands breathe, to make them alive, to have them connect with people in deep and memorable ways. Let's use them well. Not to make noise. To make something worth saying.

Your site is already moving: the question is whether it's saying something, or just making noise.