Flying Goose Media
Media & Production · 2026
Service
Motion Design & 3D
Motion design and 3D from Designer Digital is what turns a static website into something that feels alive — measured, intentional movement that earns every frame instead of cluttering the page.
What it is
Motion design is animation that has a job. A scroll-triggered hero reveal, a button that responds to a hover, a number that counts up when it enters the viewport, a 3D scene that rotates as the user moves through the page. Done well, motion guides attention and makes a site feel premium. Done badly, it slows the page down, drains battery, and irritates anyone with vestibular sensitivity.
What's included
- GSAP timeline animations (scroll-triggered, hover, on-load)
- Three.js / WebGL scenes (custom shaders, models, post-processing)
- Lottie animations for vector-driven motion
- Cinemagraph / video-loop integration
- prefers-reduced-motion fallbacks for every animation
- Performance budget: animation must not cost more than 16ms per frame on mid-tier mobile
Why hand-coded
Builder-platform animation is almost always heavy and rarely respects accessibility preferences. We hand-code motion in GSAP and Three.js — every animation is performance-budgeted from the start, and every animation has a reduced-motion fallback so users who opt out get a static experience.
Process
- Storyboard. Sketch the motion arc on paper before any code. What earns its frames; what doesn't.
- Prototype. Build the most complex moment first, in code. If it can't hit 60fps on a mid-tier phone, we redesign it.
- Integrate. Wire motion into the build. ScrollTrigger, intersection observers, request-animation-frame loops as appropriate.
- Tune. Profile on real devices. Cull what isn't pulling its weight.
Recent motion & 3d work
FAQ
Will animation slow my site down?
It can, if it's done badly. Done well, GSAP timelines and Three.js scenes are GPU-accelerated and add little to no main-thread cost. We performance-budget every animation up-front so this is a measured trade-off, not an accident.
Do you build 3D experiences like the ones on award sites?
Yes — we use Three.js and GLSL shaders for WebGL work. Our gallery view is one example. We can do model imports (GLTF), custom shaders, and post-processing. Performance is the constraint, not technique.
What about prefers-reduced-motion?
Every animation we ship respects the prefers-reduced-motion media query. Users who've opted out of motion in their OS settings get static layouts. This is non-negotiable — it's an accessibility requirement, not an extra.
Related services
Want to scope a motion & 3d project?
Send the details through the contact form. We'll respond within two business days with a clear next step.
Start a project