mycsslab/src/motion/gsap-integration.css

MyCSSLab Quantum v3.0 - Revolutionary CSS framework with AI-powered intelligence, holographic UI, neural networks, and quantum effects

/**
 * FluxCSS GSAP Integration
 * JavaScript-powered animations using GSAP
 */

/* GSAP Animation Classes - These will be enhanced by JavaScript */
.my-gsap-fade-in {
  opacity: 0;
}

.my-gsap-fade-out {
  opacity: 1;
}

.my-gsap-slide-up {
  opacity: 0;
  y: 30;
}

.my-gsap-slide-down {
  opacity: 0;
  y: -30;
}

.my-gsap-slide-left {
  opacity: 0;
  x: -30;
}

.my-gsap-slide-right {
  opacity: 0;
  x: 30;
}

.my-gsap-scale-in {
  opacity: 0;
  scale: 0.8;
}

.my-gsap-scale-out {
  opacity: 1;
  scale: 1;
}

.my-gsap-rotate-in {
  opacity: 0;
  rotation: 180;
}

.my-gsap-rotate-out {
  opacity: 1;
  rotation: 0;
}

.my-gsap-bounce-in {
  opacity: 0;
  scale: 0.3;
}

.my-gsap-bounce-out {
  opacity: 1;
  scale: 1;
}

/* Scroll Trigger Classes */
.my-scroll-fade-in {
  opacity: 0;
}

.my-scroll-slide-up {
  opacity: 0;
  y: 50;
}

.my-scroll-slide-down {
  opacity: 0;
  y: -50;
}

.my-scroll-slide-left {
  opacity: 0;
  x: -50;
}

.my-scroll-slide-right {
  opacity: 0;
  x: 50;
}

.my-scroll-scale-in {
  opacity: 0;
  scale: 0.8;
}

.my-scroll-rotate-in {
  opacity: 0;
  rotation: 45;
}

/* Timeline Classes */
.my-timeline-fade-in {
  opacity: 0;
}

.my-timeline-slide-up {
  opacity: 0;
  y: 30;
}

.my-timeline-scale-in {
  opacity: 0;
  scale: 0.9;
}

/* Stagger Classes */
.my-stagger-fade-in {
  opacity: 0;
}

.my-stagger-slide-up {
  opacity: 0;
  y: 20;
}

.my-stagger-scale-in {
  opacity: 0;
  scale: 0.95;
}

/* Hover GSAP Classes */
.my-hover-gsap-scale:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease-out;
}

.my-hover-gsap-rotate:hover {
  transform: rotate(5deg);
  transition: transform 0.2s ease-out;
}

.my-hover-gsap-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease-out;
}

.my-hover-gsap-glow:hover {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
  transition: box-shadow 0.3s ease-out;
}

/* Focus GSAP Classes */
.my-focus-gsap-scale:focus {
  transform: scale(1.02);
  transition: transform 0.2s ease-out;
}

.my-focus-gsap-ring:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
  transition: box-shadow 0.2s ease-out;
}

/* Loading States */
.my-loading-spin {
  animation: fx-spin 1s linear infinite;
}

.my-loading-pulse {
  animation: fx-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.my-loading-bounce {
  animation: fx-bounce 1s infinite;
}

/* Morphing Animations */
.my-morph-scale {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.my-morph-scale:hover {
  transform: scale(1.1);
}

.my-morph-rotate {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.my-morph-rotate:hover {
  transform: rotate(10deg) scale(1.05);
}

/* Parallax Classes */
.my-parallax-slow {
  transform: translateZ(0);
  will-change: transform;
}

.my-parallax-medium {
  transform: translateZ(0);
  will-change: transform;
}

.my-parallax-fast {
  transform: translateZ(0);
  will-change: transform;
}

/* 3D Transform Classes */
.my-3d-rotate-x {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.my-3d-rotate-y {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.my-3d-rotate-z {
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* Magnetic Effect */
.my-magnetic {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.my-magnetic:hover {
  transform: scale(1.05);
}

/* Ripple Effect */
.my-ripple {
  position: relative;
  overflow: hidden;
}

.my-ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.my-ripple:active::before {
  width: 300px;
  height: 300px;
}

/* Shake Animation */
.my-shake {
  animation: fx-shake 0.5s ease-in-out;
}

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

/* Wobble Animation */
.my-wobble {
  animation: fx-wobble 1s ease-in-out;
}

@keyframes fx-wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}

/* Jello Animation */
.my-jello {
  animation: fx-jello 0.9s ease-in-out;
}

@keyframes fx-jello {
  0% { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  100% { transform: scale3d(1, 1, 1); }
}

/* Heartbeat Animation */
.my-heartbeat {
  animation: fx-heartbeat 1.5s ease-in-out infinite;
}

@keyframes fx-heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}

/* Rubber Band Animation */
.my-rubber-band {
  animation: fx-rubber-band 1s ease-in-out;
}

@keyframes fx-rubber-band {
  0% { transform: scale(1); }
  30% { transform: scaleX(1.25) scaleY(0.75); }
  40% { transform: scaleX(0.75) scaleY(1.25); }
  50% { transform: scaleX(1.15) scaleY(0.85); }
  65% { transform: scaleX(0.95) scaleY(1.05); }
  75% { transform: scaleX(1.05) scaleY(0.95); }
  100% { transform: scale(1); }
}