Filter/Tag
13 entries
Make a character move. Rigging and skinning explained, where clips come from (Blender, Mixamo), then drive a skinned glTF with AnimationMixer — cross-fade states, fire one-shot emotes, blend morph-target expressions — with a live demo.
Turn taps into 3D intent. Raycast to pick the character or the ground, move with click-to-move, face the travel direction, and wire a tiny state machine that drives Idle ⇄ Walk ⇄ Run cross-fades — coexisting with OrbitControls. Live demo.
Part 21 opens a bonus Motion & Scenes arc: direct a whole scene, not one element. Use SMIL syncbase timing (begin="other.end") to sequence sky, sun, clouds and title into a self-playing, looping scene — no JS clock. With a live demo.
Part 23: bring a character to life. Build a skeleton from nested <g> joints, rotate each around its pivot, and let transform inheritance swing the whole limb — then drive a wave and a walk cycle. With a live demo.
Part 24: hand the timeline to the reader. Use the Scroll-driven Animations API (scroll() and view()) to draw an SVG path as the page scrolls, with parallax layers for depth and a JS fallback. With a live scrollytelling demo.
Part 22: make anything travel along a curve. Master animateMotion, reuse a path with <mpath>, and use rotate="auto" so a traveler banks into the turn instead of sliding — plus the CSS offset-path equivalent. With a live demo.
The motion arc finale: ambient scenes that just live. Seamless parallax loops (translate a tile by its width, then wrap) and a lightweight requestAnimationFrame particle pool that recycles nodes. With a live demo.
Make SVG move: the famous self-drawing line with stroke-dasharray/stroke-dashoffset, CSS keyframes vs native SMIL <animate>/<animateTransform>, motion along a path with animateMotion, and when to pick which. With a scrubbable studio.
Animate the d attribute itself: the golden rule of morphing (same command structure), interpolating coordinates, SMIL path animation, why circles fight stars, and how flubber resamples paths. With a scrubbable morph lab.
When hand-rolled rAF and CSS stop scaling: what GSAP, anime.js, and Motion give you — timelines, stagger, scrubbing, MorphSVG, MotionPath — plus a decision table for CSS vs SMIL vs library. With a live timeline/stagger player.
Bring in real assets and make them move: loading glTF with Draco, the AnimationMixer / AnimationClip / AnimationAction trio, crossfading between clips, and frame-rate-independent playback — with a live mixer you can drive.
Bilingual 2026 guide: same-document SPA and cross-document MPA view transitions, pseudo-elements, shared elements, reduced motion, Astro/React integration, browser support, and fallbacks.
Senior guide to landing-page motion: page-load orchestration, scroll reveal, stagger, parallax, gestures, and route transitions — with CSS, vanilla JS, and Framer Motion patterns plus library picks.