@dialpad/dialtone-css/lib/build/less/components/motion_text.less

Dialpad's design system

//
//  DIALTONE
//  RECIPES: MOTION TEXT
//
//  TABLE OF CONTENTS
//  • CSS CUSTOM PROPERTIES
//  • BASE STYLE
//  • CHILD ELEMENTS
//  • ANIMATION KEYFRAMES
//  • TRANSITION CLASSES - GRADIENT IN
//  • TRANSITION CLASSES - FADE IN
//  • TRANSITION CLASSES - SLIDE IN
//  • GRADIENT IN
//  • GRADIENT SWEEP & SHIMMER
//  • MODIFIERS
//  • ACCESSIBILITY
//
//  ============================================================================
//  $   CSS CUSTOM PROPERTIES
//  ----------------------------------------------------------------------------
@property --d-motion-text-mask-pos {
  inherits: true;
  initial-value: 0%;
  syntax: '<percentage>';
}

//  ============================================================================
//  $   BASE STYLE
//  ----------------------------------------------------------------------------
.d-motion-text {
  /* Theme variables - can be overridden by design system */
  --d-motion-text-duration: 1000ms;
  --d-motion-text-char-duration: var(--d-motion-text-duration);
  --d-motion-text-word-duration: calc(var(--d-motion-text-duration) * 2);
  --d-motion-text-highlight-color: linear-gradient(135deg, var(--dt-color-brand-magenta) 10%, var(--dt-color-brand-purple) 80%, var(--dt-color-brand-gold) 100%);
  --d-motion-text-gradient: linear-gradient(
    90deg,
    transparent 0%,
    transparent 20%,
    black 40%,
    black 60%,
    transparent 80%,
    transparent 100%
  ) 0% 0% / 500% 100%;
  --d-motion-text-shimmer-gradient: linear-gradient(
    90deg,
    black 0%,
    black 20%,
    #0005 40%,
    #0005 60%,
    black 80%,
    black 100%
  ) 0% 0% / 500% 100%;

  position: relative;
}

//  ============================================================================
//  $   CHILD ELEMENTS
//  ----------------------------------------------------------------------------
.d-motion-text__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.d-motion-text__content {
  display: contents;
}

.d-motion-text__fallback {
  display: contents;
}

.d-motion-text__char {
  display: inline;
  white-space: pre;
}

.d-motion-text__word {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

//  ============================================================================
//  $   ANIMATION KEYFRAMES
//  ----------------------------------------------------------------------------

// Gradient-in mode animations
@keyframes d-motion-text-gradient-in-char-appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes d-motion-text-gradient-in-char-reveal {
  from {
    color: var(--dt-color-neutral-transparent);
  }

  to {
    color: inherit;
  }
}

@keyframes d-motion-text-gradient-in-word-reveal {
  from {
    --d-motion-text-mask-pos: 100%;
  }

  to {
    --d-motion-text-mask-pos: 0%;
  }
}

// Fade-in mode animations
@keyframes d-motion-text-fade-in-char-appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes d-motion-text-fade-in-word-appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

// Slide-in mode animations
@keyframes d-motion-text-slide-in-char-appear {
  from {
    transform: translateY(0.3em);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes d-motion-text-slide-in-word-appear {
  from {
    transform: translateY(0.5em);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

//  ============================================================================
//  $   TRANSITION CLASSES - GRADIENT IN
//  ----------------------------------------------------------------------------
.d-motion-text-char-gradient-in-enter-active {
  animation: d-motion-text-gradient-in-char-appear var(--d-motion-text-char-duration) var(--ttf-in-out);
}

.d-motion-text-char-gradient-in-leave-active {
  animation: d-motion-text-gradient-in-char-appear calc(var(--d-motion-text-char-duration) * 0.5) var(--ttf-out-quint) reverse;
}

.d-motion-text-word-gradient-in-enter-active {
  animation: d-motion-text-gradient-in-word-reveal calc(var(--d-motion-text-word-duration) * 1.5) var(--ttf-out-quint);
}

.d-motion-text-word-gradient-in-leave-active {
  animation: d-motion-text-gradient-in-word-reveal calc(var(--d-motion-text-word-duration) * 0.5) var(--ttf-out-quint) reverse;
}

//  ============================================================================
//  $   TRANSITION CLASSES - FADE IN
//  ----------------------------------------------------------------------------
.d-motion-text-char-fade-in-enter-active {
  animation: d-motion-text-fade-in-char-appear var(--d-motion-text-char-duration) var(--ttf-out-quint);
}

.d-motion-text-char-fade-in-leave-active {
  animation: d-motion-text-fade-in-char-appear calc(var(--d-motion-text-char-duration) * 0.5) var(--ttf-out-quint) reverse;
}

.d-motion-text-word-fade-in-enter-active {
  animation: d-motion-text-fade-in-word-appear var(--d-motion-text-word-duration) var(--ttf-out-quint);
}

.d-motion-text-word-fade-in-leave-active {
  animation: d-motion-text-fade-in-word-appear calc(var(--d-motion-text-word-duration) * 0.5) var(--ttf-out-quint) reverse;
}

//  ============================================================================
//  $   TRANSITION CLASSES - SLIDE IN
//  ----------------------------------------------------------------------------
.d-motion-text-char-slide-in-enter-active {
  animation: d-motion-text-slide-in-char-appear var(--d-motion-text-char-duration) var(--ttf-out-quint);
}

.d-motion-text-char-slide-in-leave-active {
  animation: d-motion-text-slide-in-char-appear calc(var(--d-motion-text-char-duration) * 0.5) var(--ttf-out-quint) reverse;
}

.d-motion-text-word-slide-in-enter-active {
  animation: d-motion-text-slide-in-word-appear var(--d-motion-text-word-duration) var(--ttf-out-quint);
}

.d-motion-text-word-slide-in-leave-active {
  animation: d-motion-text-slide-in-word-appear calc(var(--d-motion-text-word-duration) * 0.5) var(--ttf-out-quint) reverse;
}

//  ============================================================================
//  $   GRADIENT IN
//  ----------------------------------------------------------------------------
//  Delay reveal of character text color to prevent a flash on the first letter
.d-motion-text--gradient-in .d-motion-text__char {
  animation: d-motion-text-gradient-in-char-reveal var(--d-motion-text-char-duration) var(--ttf-in-out);
}

//  ============================================================================
//  $   GRADIENT SWEEP & SHIMMER
//  ----------------------------------------------------------------------------
.d-motion-text--gradient-sweep,
.d-motion-text--shimmer {
  position: relative;
  display: inline-block;
  animation: d-motion-text-gradient-in-word-reveal calc(var(--d-motion-text-word-duration) * 1.5) var(--ttf-in-out) 1;
}

.d-motion-text--gradient-in .d-motion-text__word::before,
.d-motion-text--gradient-sweep::before {
  position: absolute;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  background: var(--d-motion-text-highlight-color);
  -webkit-background-clip: text;
  background-clip: text;
  content: attr(data-text-content);
  pointer-events: none;
  -webkit-text-fill-color: transparent;
  mask: var(--d-motion-text-gradient);
  mask-position: var(--d-motion-text-mask-pos) 0%;
}

.d-motion-text--shimmer {
  content: attr(data-text-content);
  mask: var(--d-motion-text-shimmer-gradient);
  mask-position: var(--d-motion-text-mask-pos) 0%;
}

//  ============================================================================
//  $   MODIFIERS
//  ----------------------------------------------------------------------------
.d-motion-text--none .d-motion-text__word,
.d-motion-text--none .d-motion-text__char {
  transform: none;
  opacity: 1;
}

.d-motion-text--paused {
  animation-play-state: paused !important;
}

.d-motion-text--looped {
  animation-iteration-count: infinite !important;
}

//  ============================================================================
//  $   ACCESSIBILITY
//  ----------------------------------------------------------------------------
@media (prefers-reduced-motion: reduce) {
  .d-motion-text {
    --d-motion-text-duration: 0ms;
    --d-motion-text-char-duration: 0ms;
    --d-motion-text-word-duration: 0ms;

    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}