// Animate gsap.to(logo, { strokeDashoffset: 0, duration: 1.5, ease: 'power2.inOut' });


**Best for:** Wordmarks, monoline logos, signature styles

### 2. Scale-In Reveal

```javascript
// Confident entrance from center
gsap.from('.logo', {
  scale: 0.8,
  opacity: 0,
  duration: 0.6,
  ease: 'back.out(1.5)'  // Slight overshoot
});

Best for: Symbol marks, compact logos, tech brands

3. Mask Reveal

// Wipe/mask reveal
gsap.from('.logo-mask', {
  scaleX: 0,
  transformOrigin: 'left center',
  duration: 0.8,
  ease: 'power3.inOut'
});

Best for: Horizontal wordmarks, premium brands

4. Particle Assembly

// Logo assembled from particles
particles.forEach((particle, i) => {
  gsap.to(particle, {
    x: finalPositions[i].x,
    y: finalPositions[i].y,
    duration: 1,
    delay: i * 0.02,
    ease: 'power2.out'
  });
});

Best for: Tech brands, innovative/modern identity

5. Morph Transition

// Shape morphing with flubber
const interpolator = flubber.interpolate(
  startPath,
  logoPath
);

gsap.to({}, {
  duration: 1,
  onUpdate: function() {
    logoElement.setAttribute('d', interpolator(this.progress()));
  }
});

Best for: Multi-form logos, adaptive identity systems

Lockup Animations

Stacked Lockup

// Logo + tagline stagger
const tl = gsap.timeline();

tl.from('.logo-symbol', {
    scale: 0.9,
    opacity: 0,
    duration: 0.5,
    ease: 'power2.out'
  })
  .from('.logo-wordmark', {
    x: -20,
    opacity: 0,
    duration: 0.4
  }, '-=0.2')
  .from('.tagline', {
    y: 10,
    opacity: 0,
    duration: 0.3
  }, '-=0.1');

Horizontal Lockup

// Symbol leads, wordmark follows
const tl = gsap.timeline();

tl.from('.symbol', {
    scale: 0,
    rotation: -90,
    duration: 0.6,
    ease: 'back.out(1.2)'
  })
  .from('.wordmark', {
    x: 30,
    opacity: 0,
    duration: 0.4,
    ease: 'power2.out'
  }, '-=0.3');

Brand Motion DNA

Motion Attributes

Attribute	Conservative	Balanced	Expressive
Speed	Measured	Responsive	Dynamic
Easing	Linear/Standard	Emphasized	Spring/Bounce
Overshoot	None	Subtle	Pronounced
Secondary	Minimal	Moderate	Rich
Particles	Never	Rare	Common

Brand Personality Mapping

{
  "brand": "Example Corp",
  "personality": ["innovative", "trustworthy", "approachable"],

  "motionDNA": {
    "primary-easing": "emphasized-decelerate",
    "secondary-easing": "standard",
    "base-duration": 300,
    "stagger-interval": 50,
    "overshoot": 1.02,
    "spring-damping": 0.85,
    "particle-style": "subtle-sparkle",
    "color-transition": "smooth"
  },

  "forbidden": [
    "hard-bounce",
    "shake",
    "glitch",
    "rapid-flash"
  ]
}

Animation Timing by Context

Context	Duration	Easing	Notes
Hero logo	1-2s	Dramatic	Full reveal experience
Navigation	200-300ms	Standard	Quick, functional
Loading	1-1.5s loop	Linear	Continuous, calm
Favicon	500-800ms	Emphasized	Attention-grabbing
Social	2-3s total	Expressive	Platform constraints

Platform Considerations

Web

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .logo {
    animation: none;
    opacity: 1;
  }
}

/* Performance */
.logo {
  will-change: transform, opacity;
  transform: translateZ(0);
}

Video/Broadcast

// Longer, more dramatic timing
const videoTiming = {
  logoReveal: 1500,    // vs 600ms web
  holdDuration: 2000,  // Let it breathe
  exitDuration: 800
};

Social Media

Platform	Max Duration	Format	Safe Area
Instagram	15s (story)	9:16	10% padding
Twitter	2:20	16:9	Full bleed
LinkedIn	10min	1:1 or 16:9	5% padding
TikTok	60s	9:16	20% bottom

Responsive Logo Animation

// Adapt animation to screen size
function getLogoAnimation() {
  const width = window.innerWidth;

  if (width < 768) {
    // Mobile: simpler, faster
    return {
      duration: 0.4,
      ease: 'power2.out',
      particles: false
    };
  } else if (width < 1200) {
    // Tablet: balanced
    return {
      duration: 0.6,
      ease: 'power3.out',
      particles: 'subtle'
    };
  } else {
    // Desktop: full experience
    return {
      duration: 0.8,
      ease: 'back.out(1.2)',
      particles: 'full'
    };
  }
}

Export Specifications

Lottie

{
  "fr": 60,
  "ip": 0,
  "op": 90,
  "w": 400,
  "h": 100,
  "nm": "Logo Animation",
  "ddd": 0,
  "assets": [],
  "layers": [
    // Logo layers with animation data
  ]
}

CSS Keyframes

@keyframes logo-reveal {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  60% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

.logo {
  animation: logo-reveal 0.6s ease-out forwards;
}

Quality Checklist

Pre-Flight

Logo renders at all sizes (16px to 400px)
Animation works in light and dark mode
Reduced motion alternative provided
Loop point is seamless (if applicable)
File size optimized (<50KB for Lottie)

Brand Consistency

Motion matches brand guidelines
Timing consistent with other brand animations
Color transitions match brand palette
No unapproved motion styles used

Related Skills

Dependencies: easing, duration, morphing
See also: lottie, export, storyboarding
Tokens: Inherit from brand's design tokens

brand-animation

Brand Animation

Logo Animation Patterns

1. Draw-On Reveal