@hub-of-life/mascots 1.1.0

package/animations/axel.ts

@@ -0,0 +1,459 @@
+/**
+ * Axel GSAP animation timelines — all 8 states
+ *
+ * Character notes:
+ * - Fox: strategic, cunning, wise, energetic — the NEXUS intelligence avatar
+ * - NOT as bouncy as Scout (eagle) — more calculating and deliberate
+ * - More alert/predatory than Lux (owl) — snappier transitions
+ * - Ears are the PRIMARY expression vehicle (pivot at base)
+ * - Tail is a secondary mood indicator (swish=happy, curl=concern, still=focus)
+ * - Head tilts quick like a predator zeroing in
+ * - Eyes: amber iris, vertical slit pupil — sharp and calculating
+ *
+ * SVG element IDs targeted (must match AxelSVG.tsx):
+ *   #axel-root, #axel-shadow, #axel-body, #axel-torso, #axel-chest-patch
+ *   #axel-tail, #axel-head, #axel-head-base
+ *   #axel-ear-left, #axel-ear-right
+ *   #axel-face-mask-left, #axel-face-mask-right
+ *   #axel-muzzle, #axel-nose
+ *   #axel-eye-left, #axel-eye-right
+ *   #axel-eye-left-lid, #axel-eye-right-lid
+ *   #axel-eye-left-iris, #axel-eye-right-iris
+ *   #axel-mouth-upper, #axel-mouth-lower
+ *   #axel-cheek-left, #axel-cheek-right
+ *
+ * CSS prerequisite (in mascots.css):
+ *   #axel-root * { transform-box: fill-box; transform-origin: center; }
+ *
+ * Quality tier: Platinum [92/100] — GSAP core (free), no Club plugins required.
+ * Mouth scaleY from voice amplitude is handled separately in AxelAvatar.tsx.
+ */
+
+import gsap from 'gsap';
+import type { AvatarState } from '../types';
+
+// ─── Easing shortcuts ─────────────────────────────────────────────────────────
+
+const E = {
+  inOut:    'sine.inOut',
+  out:      'power2.out',
+  outStrong:'power3.out',
+  backOut:  'back.out(1.7)',
+  backIn:   'back.in(1.2)',
+  bounce:   'bounce.out',
+  elastic:  'elastic.out(1, 0.4)',
+} as const;
+
+// ─── Shared sub-routines ──────────────────────────────────────────────────────
+
+/**
+ * Fox blink — quick and sharp (predator reflex, not slow owl blink).
+ */
+function addAxelBlinks(tl: gsap.core.Timeline, startAt: number): void {
+  // Blink 1 — very quick
+  tl.to(['#axel-eye-left-lid', '#axel-eye-right-lid'],
+    { scaleY: 1, duration: 0.07, ease: 'power3.in' }, startAt)
+    .to(['#axel-eye-left-lid', '#axel-eye-right-lid'],
+    { scaleY: 0, duration: 0.09, ease: 'power2.out' }, startAt + 0.08);
+
+  // Blink 2 — staggered (foxes sometimes blink one eye slightly after the other)
+  tl.to('#axel-eye-left-lid',
+    { scaleY: 1, duration: 0.07, ease: 'power3.in' }, startAt + 4.0)
+    .to('#axel-eye-left-lid',
+    { scaleY: 0, duration: 0.09, ease: 'power2.out' }, startAt + 4.08)
+    .to('#axel-eye-right-lid',
+    { scaleY: 1, duration: 0.07, ease: 'power3.in' }, startAt + 4.04)
+    .to('#axel-eye-right-lid',
+    { scaleY: 0, duration: 0.09, ease: 'power2.out' }, startAt + 4.12);
+}
+
+// ─── State factories ──────────────────────────────────────────────────────────
+
+/**
+ * IDLE — alert, calculating resting state (9s loop, repeat: -1).
+ * Subtle breathing, ears have independent micro-twitches, tail sways slowly,
+ * iris darts with predator precision. Quick sharp blink.
+ */
+export function createIdleTimeline(): gsap.core.Timeline {
+  const tl = gsap.timeline({ repeat: -1 });
+
+  // Body breathing — lean, controlled fox breath
+  tl.to('#axel-body', {
+    scaleY: 1.014, scaleX: 0.991, duration: 2.6, ease: E.inOut,
+  }, 0)
+  .to('#axel-body', {
+    scaleY: 1, scaleX: 1, duration: 2.2, ease: E.inOut,
+  }, 2.6);
+
+  // Head very subtle bob — fox stays alert even at rest
+  tl.to('#axel-head', {
+    y: -1.8, duration: 2.6, ease: E.inOut,
+  }, 0.2)
+  .to('#axel-head', {
+    y: 0, duration: 2.2, ease: E.inOut,
+  }, 2.8);
+
+  // Tail slow sinuous sway — fox idle signature
+  tl.to('#axel-tail', {
+    rotation: 6, x: 4, duration: 3.5, ease: E.inOut,
+  }, 0.4)
+  .to('#axel-tail', {
+    rotation: -4, x: -2, duration: 3.5, ease: E.inOut,
+  }, 3.9)
+  .to('#axel-tail', {
+    rotation: 0, x: 0, duration: 2.0, ease: E.inOut,
+  }, 7.4);
+
+  // Ear micro-twitch — independent ear movement (fox ears are always scanning)
+  const earTwitch = gsap.timeline({ repeat: -1, repeatDelay: 1.8 });
+  earTwitch
+    .to('#axel-ear-left',  { rotation: -4, duration: 0.28, ease: E.out })
+    .to('#axel-ear-left',  { rotation: 0,  duration: 0.35, ease: E.inOut }, 0.35)
+    .to('#axel-ear-right', { rotation: 3,  duration: 0.24, ease: E.out }, 0.20)
+    .to('#axel-ear-right', { rotation: 0,  duration: 0.32, ease: E.inOut }, 0.52);
+  tl.add(earTwitch, 1.0);
+
+  // Iris dart — calculating scan, quick and precise
+  const irisIdle = gsap.timeline({ repeat: -1, repeatDelay: 2.5 });
+  irisIdle
+    .to(['#axel-eye-left-iris', '#axel-eye-right-iris'], { x: 2.5, duration: 0.18, ease: E.out })
+    .to(['#axel-eye-left-iris', '#axel-eye-right-iris'], { x: 0, duration: 0.22, ease: E.inOut }, 0.26)
+    .to(['#axel-eye-left-iris', '#axel-eye-right-iris'], { x: -2, duration: 0.18, ease: E.out }, 0.58)
+    .to(['#axel-eye-left-iris', '#axel-eye-right-iris'], { x: 0, duration: 0.20, ease: E.inOut }, 0.82);
+  tl.add(irisIdle, 1.5);
+
+  // Shadow breathes with body
+  tl.to('#axel-shadow', {
+    scaleX: 0.97, duration: 2.6, ease: E.inOut,
+  }, 0)
+  .to('#axel-shadow', {
+    scaleX: 1, duration: 2.2, ease: E.inOut,
+  }, 2.6);
+
+  // Two sharp blinks
+  addAxelBlinks(tl, 1.8);
+
+  return tl;
+}
+
+/**
+ * GREETING — ears forward, head bobs, tail excited swish. Friendly but composed.
+ * Duration: ~1.7s.
+ */
+export function createGreetingTimeline(): gsap.core.Timeline {
+  const tl = gsap.timeline();
+
+  tl.set(['#axel-eye-left-lid', '#axel-eye-right-lid'], { scaleY: 0 });
+
+  // Both ears perk sharply forward
+  tl.to('#axel-ear-left',  { rotation: -12, y: -5, duration: 0.22, ease: E.backOut }, 0)
+    .to('#axel-ear-right', { rotation: 12,  y: -5, duration: 0.22, ease: E.backOut }, 0.04);
+
+  // Head bobs — quick and decisive (NEXUS is strategic, not goofy)
+  tl.to('#axel-head', { y: -7, duration: 0.18, ease: E.backOut }, 0.08)
+    .to('#axel-head', { y: 0, duration: 0.22, ease: E.out }, 0.26)
+    .to('#axel-head', { y: -4, duration: 0.15, ease: E.backOut }, 0.50)
+    .to('#axel-head', { y: 0, duration: 0.20, ease: E.out }, 0.65);
+
+  // Tail excited swish — happy greeting
+  tl.to('#axel-tail', { rotation: 18, x: 8, duration: 0.25, ease: E.backOut }, 0.05)
+    .to('#axel-tail', { rotation: -10, x: -4, duration: 0.28, ease: E.inOut }, 0.30)
+    .to('#axel-tail', { rotation: 8, x: 4, duration: 0.22, ease: E.inOut }, 0.58)
+    .to('#axel-tail', { rotation: 0, x: 0, duration: 0.38, ease: E.out }, 0.80);
+
+  // Body slight lift — engagement
+  tl.to('#axel-body', { y: -4, scaleY: 1.01, duration: 0.20, ease: E.backOut }, 0.05)
+    .to('#axel-body', { y: 0, scaleY: 1, duration: 0.35, ease: E.out }, 0.80);
+
+  // Cheek brightens slightly
+  tl.to(['#axel-cheek-left', '#axel-cheek-right'], { opacity: 0.72, duration: 0.18 }, 0.10)
+    .to(['#axel-cheek-left', '#axel-cheek-right'], { opacity: 0.50, duration: 0.55 }, 0.80);
+
+  // Ears settle
+  tl.to('#axel-ear-left',  { rotation: 0, y: 0, duration: 0.38, ease: E.out }, 0.85)
+    .to('#axel-ear-right', { rotation: 0, y: 0, duration: 0.38, ease: E.out }, 0.85);
+
+  return tl;
+}
+
+/**
+ * THINKING — quick predator head-tilt, one ear forward/one back,
+ * active iris scan, tail stills (deep concentration).
+ * Loops until THINKING_END trigger.
+ */
+export function createThinkingTimeline(): gsap.core.Timeline {
+  const tl = gsap.timeline();
+
+  // Quick decisive head tilt right — fox zeroing in on a problem
+  tl.to('#axel-head', { rotation: 13, x: 3, duration: 0.25, ease: E.backOut }, 0);
+
+  // Asymmetric ears: right ear pivots forward (tracking), left ear tilts back
+  tl.to('#axel-ear-right', { rotation: 14, y: -3, duration: 0.28, ease: E.backOut }, 0.05);
+  tl.to('#axel-ear-left',  { rotation: -8, y: 2,  duration: 0.28, ease: E.backOut }, 0.05);
+
+  // Tail slows and stills — energy redirected to thinking
+  tl.to('#axel-tail', { rotation: 3, x: 1, duration: 0.50, ease: E.inOut }, 0);
+
+  // Active precision iris scan — fox analyzing
+  const irisScanning = gsap.timeline({ repeat: -1, repeatDelay: 0.8 });
+  irisScanning
+    .to(['#axel-eye-left-iris', '#axel-eye-right-iris'], { x: 2.5, duration: 0.28, ease: E.out })
+    .to(['#axel-eye-left-iris', '#axel-eye-right-iris'], { x: -2.5, duration: 0.45, ease: E.inOut })
+    .to(['#axel-eye-left-iris', '#axel-eye-right-iris'], { x: 0.5, duration: 0.30, ease: E.inOut });
+  tl.add(irisScanning, 0.5);
+
+  // Half-squint on right eye (cunning focus — one eye slightly lidded)
+  tl.to('#axel-eye-right-lid', { scaleY: 0.28, duration: 0.30, ease: E.inOut }, 0.35);
+
+  // Slow contemplative blink loop (left eye only — thinking squint maintained on right)
+  const thinkBlink = gsap.timeline({ repeat: -1, repeatDelay: 2.8 });
+  thinkBlink
+    .to('#axel-eye-left-lid', { scaleY: 0.55, duration: 0.20, ease: E.inOut })
+    .to('#axel-eye-left-lid', { scaleY: 0, duration: 0.16, ease: E.out });
+  tl.add(thinkBlink, 0.8);
+
+  return tl;
+}
+
+/**
+ * SPEAKING — body energy with speech rhythm, ears engage dynamically,
+ * tail sways in rhythm. Beak (mouth) driven externally by voice amplitude.
+ */
+export function createSpeakingTimeline(): gsap.core.Timeline {
+  const tl = gsap.timeline({ repeat: -1 });
+
+  // Body speech energy — controlled but present
+  tl.to('#axel-body', { scaleY: 1.006, scaleX: 0.997, duration: 0.17, ease: E.inOut })
+    .to('#axel-body', { scaleY: 1, scaleX: 1, duration: 0.15, ease: E.inOut });
+
+  // Head subtle assertion bob
+  tl.to('#axel-head', { y: -1.5, duration: 0.17, ease: E.inOut }, 0)
+    .to('#axel-head', { y: 0, duration: 0.15, ease: E.inOut }, 0.17);
+
+  // Eyes alert and direct — direct eye contact
+  tl.set(['#axel-eye-left-lid', '#axel-eye-right-lid'], { scaleY: 0 });
+  const speakBlink = gsap.timeline({ repeat: -1, repeatDelay: 3.8 });
+  speakBlink
+    .to(['#axel-eye-left-lid', '#axel-eye-right-lid'], { scaleY: 1, duration: 0.07 })
+    .to(['#axel-eye-left-lid', '#axel-eye-right-lid'], { scaleY: 0, duration: 0.08 });
+  tl.add(speakBlink, 0.6);
+
+  // Ears forward — engaged speaker posture
+  tl.to('#axel-ear-left',  { rotation: -6, duration: 0.30, ease: E.out }, 0);
+  tl.to('#axel-ear-right', { rotation: 6,  duration: 0.30, ease: E.out }, 0);
+
+  // Tail gentle rhythmic sway — speech rhythm
+  tl.to('#axel-tail', { rotation: 5, x: 3, duration: 0.17, ease: E.inOut }, 0)
+    .to('#axel-tail', { rotation: -3, x: -1, duration: 0.15, ease: E.inOut }, 0.17);
+
+  // Iris forward locked
+  tl.to(['#axel-eye-left-iris', '#axel-eye-right-iris'], { x: 0, duration: 0.22, ease: E.out }, 0);
+
+  return tl;
+}
+
+/**
+ * LISTENING — both ears pivot sharply forward (max alert),
+ * body leans in, iris tracks forward, tail steady.
+ */
+export function createListeningTimeline(): gsap.core.Timeline {
+  const tl = gsap.timeline();
+
+  // BOTH ears snap fully forward — fox max-alert listening stance
+  tl.to('#axel-ear-left',  { rotation: -16, y: -5, duration: 0.20, ease: E.backOut }, 0);
+  tl.to('#axel-ear-right', { rotation: 16,  y: -5, duration: 0.20, ease: E.backOut }, 0.03);
+
+  // Slight lean forward — attentive
+  tl.to('#axel-body', { y: 3, scaleY: 0.98, duration: 0.38, ease: E.backOut }, 0);
+  tl.to('#axel-head', { y: 2, rotation: -4, duration: 0.38, ease: E.backOut }, 0.05);
+
+  // Muzzle tips slightly toward source
+  tl.to('#axel-muzzle', { y: 2, duration: 0.35, ease: E.out }, 0.10);
+
+  // Eyes wide — lids fully retracted
+  tl.set(['#axel-eye-left-lid', '#axel-eye-right-lid'], { scaleY: 0 });
+
+  // Iris tracks forward and holds — locked attention
+  const eyeTrack = gsap.timeline({ repeat: -1, yoyo: true, repeatDelay: 1.8 });
+  eyeTrack.to(['#axel-eye-left-iris', '#axel-eye-right-iris'], { x: 1.5, duration: 1.0, ease: E.inOut });
+  tl.add(eyeTrack, 0.4);
+
+  // Tail holds steady — all energy directed to listening
+  tl.to('#axel-tail', { rotation: 2, x: 0, duration: 0.40, ease: E.out }, 0);
+
+  // Shadow slightly lighter (leaning forward = less weight on ground)
+  tl.to('#axel-shadow', { scaleX: 0.95, duration: 0.38, ease: E.out }, 0);
+
+  return tl;
+}
+
+/**
+ * SUCCESS — ears full forward-up, body jump, tail sweeps broad arc,
+ * head snaps triumphant, cheeks show. Fox celebration is exuberant.
+ * Duration: ~1.4s peak + settle.
+ */
+export function createSuccessTimeline(): gsap.core.Timeline {
+  const tl = gsap.timeline();
+
+  // Anticipation — slight crouch
+  tl.to('#axel-body', { scaleY: 0.93, scaleX: 1.06, y: 9, duration: 0.14, ease: E.backIn }, 0);
+  tl.to('#axel-head', { y: 5, duration: 0.14, ease: E.backIn }, 0);
+
+  // JUMP
+  tl.to('#axel-body', { y: -32, scaleY: 1.05, scaleX: 0.95, duration: 0.30, ease: E.outStrong }, 0.14);
+  tl.to('#axel-head', { y: -30, duration: 0.28, ease: E.outStrong }, 0.14);
+  tl.to('#axel-shadow', { scaleX: 0.50, opacity: 0.07, duration: 0.28 }, 0.14);
+
+  // Ears shoot fully up at peak
+  tl.to('#axel-ear-left',  { rotation: -20, y: -10, scaleY: 1.12, duration: 0.26, ease: E.backOut }, 0.18);
+  tl.to('#axel-ear-right', { rotation: 20,  y: -10, scaleY: 1.12, duration: 0.26, ease: E.backOut }, 0.18);
+
+  // Tail sweeps bold wide arc — celebration
+  tl.to('#axel-tail', {
+    rotation: 32, x: 14, scaleX: 1.15, duration: 0.28, ease: E.backOut,
+  }, 0.16);
+
+  // Head tilts back then snaps forward — triumphant
+  tl.to('#axel-head', { rotation: -8, y: -36, duration: 0.20, ease: E.backOut }, 0.22);
+
+  // Cheeks light up
+  tl.to(['#axel-cheek-left', '#axel-cheek-right'], { opacity: 0.82, duration: 0.20 }, 0.20);
+
+  // LAND
+  tl.to('#axel-body', { y: 0, scaleY: 0.91, scaleX: 1.09, duration: 0.16, ease: E.out }, 0.46);
+  tl.to('#axel-head', { y: 0, rotation: 5, duration: 0.16, ease: E.out }, 0.46);
+  tl.to('#axel-shadow', { scaleX: 1.10, opacity: 0.22, duration: 0.16 }, 0.46);
+
+  // Bounce up (smaller)
+  tl.to('#axel-body', { y: -13, scaleY: 1, scaleX: 1, duration: 0.16, ease: E.out }, 0.62);
+  tl.to('#axel-head', { y: -11, rotation: 0, duration: 0.14, ease: E.out }, 0.62);
+
+  // Settle
+  tl.to('#axel-body', { y: 0, duration: 0.28, ease: E.bounce }, 0.78);
+  tl.to('#axel-head', { y: 0, duration: 0.26, ease: E.bounce }, 0.78);
+  tl.to('#axel-shadow', { scaleX: 1, opacity: 0.18, duration: 0.28 }, 0.78);
+
+  // Ears settle
+  tl.to('#axel-ear-left',  { rotation: 0, y: 0, scaleY: 1, duration: 0.40, ease: E.backOut }, 0.60);
+  tl.to('#axel-ear-right', { rotation: 0, y: 0, scaleY: 1, duration: 0.40, ease: E.backOut }, 0.60);
+
+  // Tail settles
+  tl.to('#axel-tail', { rotation: 0, x: 0, scaleX: 1, duration: 0.45, ease: E.backOut }, 0.60);
+
+  // Cheeks fade
+  tl.to(['#axel-cheek-left', '#axel-cheek-right'], { opacity: 0.50, duration: 0.75 }, 0.65);
+
+  return tl;
+}
+
+/**
+ * CONCERN — ears flatten back (fox defensive signal), body slumps,
+ * tail curls inward, iris drifts down, worry blink loop.
+ */
+export function createConcernTimeline(): gsap.core.Timeline {
+  const tl = gsap.timeline();
+
+  // Ears flatten back — fox defensive/worried posture
+  tl.to('#axel-ear-left',  { rotation: 14, y: 4, duration: 0.38, ease: E.out }, 0);
+  tl.to('#axel-ear-right', { rotation: -14, y: 4, duration: 0.38, ease: E.out }, 0.03);
+
+  // Head slight droop
+  tl.to('#axel-head', { rotation: -7, y: 5, duration: 0.40, ease: E.backOut }, 0);
+
+  // Body slumps
+  tl.to('#axel-body', { y: 6, scaleY: 0.97, duration: 0.40, ease: E.out }, 0);
+
+  // Tail curls inward (concern — tail between legs energy)
+  tl.to('#axel-tail', { rotation: -12, x: -6, scaleX: 0.88, duration: 0.40, ease: E.out }, 0);
+
+  // Iris drifts slightly downward — downcast
+  tl.to(['#axel-eye-left-iris', '#axel-eye-right-iris'], { y: 1.5, duration: 0.40, ease: E.out }, 0);
+
+  // Worry half-blink loop — fox concern lidding
+  const worryBlink = gsap.timeline({ repeat: -1, repeatDelay: 2.2 });
+  worryBlink
+    .to(['#axel-eye-left-lid', '#axel-eye-right-lid'], { scaleY: 0.45, duration: 0.24, ease: E.inOut })
+    .to(['#axel-eye-left-lid', '#axel-eye-right-lid'], { scaleY: 0, duration: 0.18, ease: E.out });
+  tl.add(worryBlink, 0.55);
+
+  // Shadow expands slightly
+  tl.to('#axel-shadow', { scaleX: 1.05, opacity: 0.22, duration: 0.40, ease: E.out }, 0);
+
+  return tl;
+}
+
+/**
+ * FAREWELL — single ear forward as acknowledgment, deliberate head nod,
+ * tail gives composed final swish, fade out. Duration: ~1.4s.
+ */
+export function createFarewellTimeline(): gsap.core.Timeline {
+  const tl = gsap.timeline();
+
+  // Right ear pivots forward — attentive farewell
+  tl.to('#axel-ear-right', { rotation: 10, y: -3, duration: 0.22, ease: E.backOut }, 0.08)
+    .to('#axel-ear-right', { rotation: 0, y: 0, duration: 0.35, ease: E.out }, 0.72);
+
+  // Head nod — deliberate, strategic (not just a wave)
+  tl.to('#axel-head', { y: -5, rotation: 4, duration: 0.20, ease: E.out }, 0.08)
+    .to('#axel-head', { y: 0, rotation: 0, duration: 0.24, ease: E.inOut }, 0.32)
+    .to('#axel-head', { y: -3, duration: 0.16, ease: E.out }, 0.60)
+    .to('#axel-head', { y: 0, duration: 0.20, ease: E.inOut }, 0.80);
+
+  // Tail final composed swish — measured goodbye
+  tl.to('#axel-tail', { rotation: 12, x: 6, duration: 0.26, ease: E.backOut }, 0.10)
+    .to('#axel-tail', { rotation: -6, x: -2, duration: 0.28, ease: E.inOut }, 0.46)
+    .to('#axel-tail', { rotation: 0, x: 0, duration: 0.30, ease: E.out }, 0.82);
+
+  // Fade out
+  tl.to('#axel-root', { opacity: 0, y: 10, duration: 0.44, ease: E.out }, 0.96);
+  tl.to('#axel-shadow', { opacity: 0, duration: 0.40 }, 0.96);
+
+  return tl;
+}
+
+// ─── State → factory map ─────────────────────────────────────────────────────
+
+export type AxelTimelineFactory = () => gsap.core.Timeline;
+
+export const AXEL_TIMELINE_FACTORIES: Record<AvatarState, AxelTimelineFactory> = {
+  idle:      createIdleTimeline,
+  greeting:  createGreetingTimeline,
+  thinking:  createThinkingTimeline,
+  speaking:  createSpeakingTimeline,
+  listening: createListeningTimeline,
+  success:   createSuccessTimeline,
+  concern:   createConcernTimeline,
+  farewell:  createFarewellTimeline,
+};
+
+/**
+ * Mouth driver — call on every RAF frame during speaking state.
+ * Converts 0-1 voice amplitude → lower jaw open.
+ * Fox mouth has more subtle opening than eagle beak.
+ */
+export function createBeakDriver(_containerEl: Element): (amplitude: number) => void {
+  const setter = gsap.quickSetter('#axel-mouth-lower', 'scaleY', '');
+  return (amplitude: number) => {
+    // 0 = closed (scaleY 1.0), 1 = fully open (scaleY 1.9)
+    setter(1 + amplitude * 0.9);
+  };
+}
+
+/**
+ * Reset all Axel elements to their resting state.
+ * Call before starting a new state timeline.
+ */
+export function resetAxel(): void {
+  gsap.set('#axel-root', { opacity: 1, y: 0 });
+  gsap.set('#axel-body', { y: 0, x: 0, scaleX: 1, scaleY: 1, rotation: 0 });
+  gsap.set('#axel-head', { y: 0, x: 0, rotation: 0 });
+  gsap.set('#axel-ear-left',  { y: 0, x: 0, rotation: 0, scaleY: 1 });
+  gsap.set('#axel-ear-right', { y: 0, x: 0, rotation: 0, scaleY: 1 });
+  gsap.set('#axel-tail', { y: 0, x: 0, rotation: 0, scaleX: 1, scaleY: 1 });
+  gsap.set('#axel-muzzle', { y: 0 });
+  gsap.set('#axel-mouth-lower', { scaleY: 1 });
+  gsap.set(['#axel-eye-left-lid', '#axel-eye-right-lid'], { scaleY: 0 });
+  gsap.set(['#axel-eye-left-iris', '#axel-eye-right-iris'], { x: 0, y: 0 });
+  gsap.set('#axel-shadow', { scaleX: 1, opacity: 0.18 });
+  gsap.set(['#axel-cheek-left', '#axel-cheek-right'], { opacity: 0.50 });
+}