brand-animation

برای لوگو و هویت بصری، موشن‌زبانی منسجم و حرفه‌ای طراحی کنید.

این مهارت الگوهای کاربردی برای انیمیشن لوگو، نمایش تدریجی wordmark، lockupهای برند، morph transition و افکت‌های ذره‌ای ارائه می‌دهد. با کمک آن می‌توانید برای هر هویت بصری، سرعت، easing، مدت‌زمان و میزان اغراق مناسب را تعریف کنید.

همچنین ملاحظات responsive، دسترس‌پذیری با prefers-reduced-motion، خروجی Lottie و CSS و محدودیت‌های وب، ویدیو و شبکه‌های اجتماعی را پوشش می‌دهد. نتیجه، موشن‌هایی سازگار با شخصیت برند و قابل استفاده در اندازه‌ها و پلتفرم‌های مختلف است.

چه چیزی می‌گیرید

• الگوهای آماده برای Draw-On، Scale-In، Mask Reveal، Particle Assembly و Morph
• سناریوهای انیمیشن برای لوگوهای نمادین، wordmark و lockupهای افقی یا عمودی
• چارچوب تعریف Motion DNA شامل duration، easing، overshoot و stagger
• راهنمای زمان‌بندی برای وب، ویدیو، loading، favicon و شبکه‌های اجتماعی
• چک‌لیست کیفیت برای responsive، reduced motion، بهینه‌سازی و خروجی Lottie

برای چه کاری خوب است

• طراحان برند و motion designerهایی که برای لوگو یا هویت بصری موشن می‌سازند
• تیم‌های محصولی که به یک زبان حرکتی منسجم برای رابط کاربری و برند نیاز دارند
• پروژه‌هایی که باید یک لوگو را برای وب، ویدیو، Lottie و شبکه‌های اجتماعی تطبیق دهند

برای چه کاری نیست

• ساخت انیمیشن‌های کاملاً سه‌بعدی یا شبیه‌سازی‌های پیچیده سینمایی
• پروژه‌هایی که هنوز لوگو، دارایی‌های بصری یا دستورالعمل برند مشخصی ندارند
• موشن‌های عمومی رابط کاربری که به انیمیشن هویت برند وابسته نیستند

دربارهٔ این اسکیل

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

دانلود ZIP