Brand Animation

Motion patterns for logo reveals, brand identity, and consistent motion language.

Logo Animation Patterns

1. Draw-On Reveal

// SVG stroke animation
const logo = document.querySelector('.logo-path');
const length = logo.getTotalLength();

logo.style.strokeDasharray = length;
logo.style.strokeDashoffset = length;

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

Best for: Wordmarks, monoline logos, signature styles

2. Scale-In Reveal

// 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

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

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

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