Bricks Interaction Animations Util Class

styles.css

/* Available globally */
:root {
  --wpe-transition-distance: 15px;
  --wpe-transition-rotation: 15deg;

  /* use as globals if you wish to 
     e.g. var(--wpe-animation-duration--fast);
    */

  --wpe-animation-duration--fast: 0.2s;
  --wpe-animation-duration--medium: 0.6s;
  --wpe-animation-duration--slow: 1s;
  --wpe-animation-duration--very-slow: 2s;
  --wpe-animation-timing-function--default: ease-in-out;

}

/* Available to CSS Class */
%root% {
  /* 
    Vars for staggering 
    Do not set Duration, Delay & Timing Function in Bricks UI when using Stagger
    To set defaults for the following, set the style attribute at ID or unique class level. 
    Set: --wpe-stagger-step-base, --wpe-animation-delay-base, --wpe-animation-duration-base, --wpe-animation-timing-function-base
    */
  --wpe-stagger-step: var(--wpe-stagger-step-base, 0.2s);
  --wpe-animation-delay: var(--wpe-animation-delay-base, 0s);
  --wpe-animation-duration: var(--wpe-animation-duration-base, 0.6s);
  --wpe-animation-timing-function: var(--wpe-animation-timing-function-base, ease);
}

/*###################################
  Bricks Animations Overrides
  ####################################*/
/* Form Left */
%root% .brx-animate-fadeInLeft,
%root%.brx-animate-fadeInLeft {
  animation-name: wpe-fadeInLeft;
}

@keyframes wpe-fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(calc(-1 * var(--wpe-transition-distance)));
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

/* form right */
%root% .brx-animate-fadeInRight,
%root%.brx-animate-fadeInRight {
  animation-name: wpe-fadeInRight;
}

@keyframes wpe-fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(var(--wpe-transition-distance));
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

/* Form top */
%root% .brx-animate-fadeInDown,
%root%.brx-animate-fadeInDown {
  animation-name: wpe-fadeInDown;
}

@keyframes wpe-fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(calc(-1 * var(--wpe-transition-distance)));
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

/* form bottom */
%root% .brx-animate-fadeInUp,
%root%.brx-animate-fadeInUp {
  animation-name: wpe-fadeInUp;
}

@keyframes wpe-fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(var(--wpe-transition-distance));
  }

  100% {
    opacity: 1;
    transform: none;
  }
}



/*###################################
  MODIFIERS
  ####################################*/
/* stagger Delay */

%root%--stagger-delay>* {
  animation-delay: var(--wpe-animation-delay-x) !important;
  animation-timing-function: var(--wpe-animation-timing-function) !important;
}

%root%--stagger-delay>*:nth-of-type(1) {
  --wpe-animation-delay-x: var(--wpe-animation-delay);
}

%root%--stagger-delay>*:nth-of-type(2) {
  --wpe-animation-delay-x: calc(var(--wpe-stagger-step) + var(--wpe-animation-delay));
}

%root%--stagger-delay>*:nth-of-type(3) {
  --wpe-animation-delay-x: calc(2 * var(--wpe-stagger-step) + var(--wpe-animation-delay));
}

%root%--stagger-delay>*:nth-of-type(4) {
  --wpe-animation-delay-x: calc(3 * var(--wpe-stagger-step) + var(--wpe-animation-delay));
}

%root%--stagger-delay>*:nth-of-type(5) {
  --wpe-animation-delay-x: calc(4 * var(--wpe-stagger-step) + var(--wpe-animation-delay));
}

%root%--stagger-delay>*:nth-of-type(6) {
  --wpe-animation-delay-x: calc(5 * var(--wpe-stagger-step) + var(--wpe-animation-delay));
}

%root%--stagger-delay>*:nth-of-type(7) {
  --wpe-animation-delay-x: calc(6 * var(--wpe-stagger-step) + var(--wpe-animation-delay));
}

%root%--stagger-delay>*:nth-of-type(8) {
  --wpe-animation-delay-x: calc(7 * var(--wpe-stagger-step) + var(--wpe-animation-delay));
}

%root%--stagger-delay>*:nth-of-type(9) {
  --wpe-animation-delay-x: calc(8 * var(--wpe-stagger-step) + var(--wpe-animation-delay));
}

%root%--stagger-delay>*:nth-of-type(10) {
  --wpe-animation-delay-x: calc(9 * var(--wpe-stagger-step) + var(--wpe-animation-delay));
}

/* stagger Duration */

%root%--stagger-duration>* {
  animation-duration: var(--wpe-animation-duration-x) !important;
  animation-timing-function: var(--wpe-animation-timing-function) !important;
}

%root%--stagger-duration>*:nth-of-type(1) {
  --wpe-animation-duration-x: var(--wpe-animation-duration);
}

%root%--stagger-duration>*:nth-of-type(2) {
  --wpe-animation-duration-x: calc(var(--wpe-animation-duration) + var(--wpe-stagger-step));
}

%root%--stagger-duration>*:nth-of-type(3) {
  --wpe-animation-duration-x: calc(2 * var(--wpe-stagger-step) + var(--wpe-animation-duration));
}

%root%--stagger-duration>*:nth-of-type(4) {
  --wpe-animation-duration-x: calc(3 * var(--wpe-stagger-step) + var(--wpe-animation-duration));
}

%root%--stagger-duration>*:nth-of-type(5) {
  --wpe-animation-duration-x: calc(4 * var(--wpe-stagger-step) + var(--wpe-animation-duration));
}

%root%--stagger-duration>*:nth-of-type(6) {
  --wpe-animation-duration-x: calc(5 * var(--wpe-stagger-step) + var(--wpe-animation-duration));
}

%root%--stagger-duration>*:nth-of-type(7) {
  --wpe-animation-duration-x: calc(6 * var(--wpe-stagger-step) + var(--wpe-animation-duration));
}

%root%--stagger-duration>*:nth-of-type(8) {
  --wpe-animation-duration-x: calc(7 * var(--wpe-stagger-step) + var(--wpe-animation-duration));
}

%root%--stagger-duration>*:nth-of-type(9) {
  --wpe-animation-duration-x: calc(8 * var(--wpe-stagger-step) + var(--wpe-animation-duration));
}

%root%--stagger-duration>*:nth-of-type(10) {
  --wpe-animation-duration-x: calc(9 * var(--wpe-stagger-step) + var(--wpe-animation-duration));
}