Animation and Transition Libraries in SCSS

Creating Transition Mixins

Transitions can be standardized across your project using SCSS mixins:

// Basic transition mixin
@mixin transition($property: all, $duration: 0.3s, $timing: ease, $delay: 0s) {
  transition: $property $duration $timing $delay;
}

// Usage
.button {
  background-color: blue;
  @include transition(background-color);
  
  &:hover {
    background-color: darkblue;
  }
}

// Multiple transitions mixin
@mixin transitions($transitions...) {
  $result: ();
  @each $transition in $transitions {
    $result: append($result, $transition, comma);
  }
  transition: $result;
}

// Usage
.complex-element {
  @include transitions(
    (color 0.3s ease),
    (background-color 0.5s ease-in-out),
    (transform 0.2s ease 0.1s)
  );
}
                        

Building an Animation Library

Create reusable animations with SCSS by defining keyframes and animation mixins:

// Animation mixin
@mixin animation($name, $duration: 1s, $timing: ease, $delay: 0s, $iteration: 1, $direction: normal, $fill-mode: forwards) {
  animation: $name $duration $timing $delay $iteration $direction $fill-mode;
}

// Fade in animation
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

// Bounce animation
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

// Usage
.element {
  @include animation(fadeIn, 0.5s);
}

.bouncing-element {
  @include animation(bounce, 2s, ease-in-out, 0s, infinite);
}
                        

Creating a Comprehensive Animation Library

Organize your animations into a reusable library:

// _animations.scss

// Attention seekers
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

// Entrances
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

// Exits
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}

// Animation mixins
@mixin pulse($duration: 1s) {
  @include animation(pulse, $duration, ease-in-out, 0s, infinite);
}

@mixin shake($duration: 0.8s) {
  @include animation(shake, $duration);
}

@mixin fadeInUp($duration: 0.5s) {
  @include animation(fadeInUp, $duration);
}

// Usage
.notification {
  @include pulse();
}

.error-message {
  @include shake();
}

.modal {
  @include fadeInUp();
}
                        

Performance Considerations

Optimize your animations for better performance:

• Use transform and opacity: These properties are more performant than animating dimensions or positions.
• Avoid animating layout properties: Properties like width, height, margin, and padding trigger layout recalculations.
• Use will-change: Hint to browsers about properties that will change.
• Consider reduced motion: Respect user preferences for reduced motion.

// Performance-optimized animation mixin
@mixin optimized-animation($name, $duration: 1s, $timing: ease) {
  will-change: transform, opacity;
  @include animation($name, $duration, $timing);
}

// Respect reduced motion preferences
@mixin motion-safe-animation($name, $duration: 1s, $timing: ease) {
  @media (prefers-reduced-motion: no-preference) {
    @include animation($name, $duration, $timing);
  }
  
  @media (prefers-reduced-motion: reduce) {
    // Provide a reduced or no animation alternative
    animation: none;
    transition: none;
  }
}

// Usage
.optimized-element {
  @include optimized-animation(fadeIn, 0.5s);
}

.accessible-element {
  @include motion-safe-animation(pulse, 1s);
}
                        

Integration with JavaScript

Combine SCSS animations with JavaScript for more interactive experiences:

// SCSS
.animated-element {
  opacity: 0;
  
  &.animate {
    @include fadeInUp();
  }
}

// JavaScript
document.addEventListener('DOMContentLoaded', () => {
  const elements = document.querySelectorAll('.animated-element');
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('animate');
      }
    });
  });
  
  elements.forEach(element => {
    observer.observe(element);
  });
});