animex/src/animex.css

Modern animation-on-scroll library with optional GSAP support

[animex] {
  opacity: 0;
  transition: all var(--animex-duration, 800ms) var(--animex-easing, ease);
}

/* Core Animations */
[animex="fade"] {
  opacity: 0;
}
[animex="fade-up"] {
  transform: translateY(30px);
  opacity: 0;
}
[animex="fade-down"] {
  transform: translateY(-30px);
  opacity: 0;
}
[animex="fade-left"] {
  transform: translateX(30px);
  opacity: 0;
}
[animex="fade-right"] {
  transform: translateX(-30px);
  opacity: 0;
}
[animex="zoom-in"] {
  transform: scale(0.5);
  opacity: 0;
}
[animex="zoom-out"] {
  transform: scale(1.5);
  opacity: 0;
}
[animex="flip-up"] {
  transform: perspective(1000px) rotateX(90deg);
  transform-origin: bottom;
  opacity: 0;
}
[animex="flip-down"] {
  transform: perspective(1000px) rotateX(-90deg);
  transform-origin: top;
  opacity: 0;
}

/* Extended Animations (Grouped by Type) */
[animex="bounce"] {
  animation: animex-bounce 1s;
}
[animex="pulse"] {
  animation: animex-pulse 1s;
}
[animex="shake"] {
  animation: animex-shake 0.5s;
}
[animex="slide-in-left"] {
  transform: translateX(-100%);
  opacity: 0;
}
[animex="slide-in-right"] {
  transform: translateX(100%);
  opacity: 0;
}
[animex="slide-in-top"] {
  transform: translateY(-100%);
  opacity: 0;
}
[animex="slide-in-bottom"] {
  transform: translateY(100%);
  opacity: 0;
}
[animex="rotate-in"] {
  transform: rotate(-200deg);
  opacity: 0;
}
[animex="light-speed-in"] {
  transform: translateX(100%) skewX(-30deg);
  opacity: 0;
}
[animex="flip-left"] {
  transform: perspective(1000px) rotateY(90deg);
  transform-origin: left;
  opacity: 0;
}
[animex="flip-right"] {
  transform: perspective(1000px) rotateY(-90deg);
  transform-origin: right;
  opacity: 0;
}
[animex="roll-in"] {
  transform: translateX(-100%) rotate(-120deg);
  opacity: 0;
}
[animex="grow"] {
  transform: scale(0);
  opacity: 0;
}
[animex="shrink"] {
  transform: scale(2);
  opacity: 0;
}
[animex="blur-in"] {
  filter: blur(10px);
  opacity: 0;
}
[animex="skew-in"] {
  transform: skewY(20deg);
  opacity: 0;
}
[animex="hinge"] {
  transform-origin: top left;
  animation: animex-hinge 2s;
}
[animex="jack-in-the-box"] {
  transform: scale(0.1) rotate(30deg);
  opacity: 0;
}
[animex="fade-zoom-in"] {
  transform: scale(0.6);
  opacity: 0;
}
[animex="fade-zoom-out"] {
  transform: scale(1.4);
  opacity: 0;
}
[animex="rotate-in-left"] {
  transform: rotate(-90deg);
  opacity: 0;
}
[animex="rotate-in-right"] {
  transform: rotate(90deg);
  opacity: 0;
}
[animex="scale-in-left"] {
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}
[animex="scale-in-right"] {
  transform: scaleX(0);
  transform-origin: right;
  opacity: 0;
}
[animex="scale-in-top"] {
  transform: scaleY(0);
  transform-origin: top;
  opacity: 0;
}
[animex="scale-in-bottom"] {
  transform: scaleY(0);
  transform-origin: bottom;
  opacity: 0;
}
[animex="swing-in"] {
  transform: rotateX(90deg);
  transform-origin: top;
  opacity: 0;
}
[animex="bounce-in-left"] {
  transform: translateX(-500px);
  opacity: 0;
}
[animex="bounce-in-right"] {
  transform: translateX(500px);
  opacity: 0;
}
[animex="bounce-in-top"] {
  transform: translateY(-500px);
  opacity: 0;
}
[animex="bounce-in-bottom"] {
  transform: translateY(500px);
  opacity: 0;
}
[animex="zoom-rotate-in"] {
  transform: scale(0.3) rotate(-45deg);
  opacity: 0;
}
[animex="flip-scale-in"] {
  transform: scale(0) rotateY(180deg);
  opacity: 0;
}
[animex="twist-in"] {
  transform: rotateZ(60deg) scale(0.1);
  opacity: 0;
}
[animex="fade-blur-in"] {
  filter: blur(10px);
  opacity: 0;
}
[animex="elastic-in"] {
  transform: scale(0.5);
  opacity: 0;
}
[animex="drop-in"] {
  transform: translateY(-300px);
  opacity: 0;
}
[animex="flip-diagonal-in"] {
  transform: perspective(1000px) rotate3d(1, 1, 0, 90deg);
  opacity: 0;
}
[animex="rotate-blur-in"] {
  transform: rotate(-90deg);
  filter: blur(10px);
  opacity: 0;
}

/* Add more patterns to reach 100 total */
[animex="expand-in"] {
  transform: scale(0.1, 0.1);
  opacity: 0;
}
[animex="collapse-in"] {
  transform: scale(3, 3);
  opacity: 0;
}
[animex="slide-fade-left"] {
  transform: translateX(-40px);
  opacity: 0;
}
[animex="slide-fade-right"] {
  transform: translateX(40px);
  opacity: 0;
}
[animex="slide-fade-top"] {
  transform: translateY(-40px);
  opacity: 0;
}
[animex="slide-fade-bottom"] {
  transform: translateY(40px);
  opacity: 0;
}
[animex="flip-top-left"] {
  transform: perspective(1000px) rotateX(90deg) rotateY(90deg);
  transform-origin: top left;
  opacity: 0;
}
[animex="flip-top-right"] {
  transform: perspective(1000px) rotateX(90deg) rotateY(-90deg);
  transform-origin: top right;
  opacity: 0;
}
[animex="wave-in"] {
  transform: rotate(20deg) scale(0.9);
  opacity: 0;
}
[animex="fan-in"] {
  transform: rotateY(-90deg) scale(0.5);
  opacity: 0;
}

/* Keyframes */
@keyframes animex-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-25px);
  }
}
@keyframes animex-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@keyframes animex-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}
@keyframes animex-hinge {
  0% {
    transform: rotate(0);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  20%,
  60% {
    transform: rotate(80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  40%,
  80% {
    transform: rotate(60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(700px);
    opacity: 0;
  }
}

[animex].animex-animate {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  [animex] {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}