transitions.scss

/**
 * Remato most common transitions
 *
 * https://www.figma.com/file/F2PQ9LaVUGTNrS3ZMnOLzq/%23-TRANSITIONS
 */

// Timing functions
$ease-out: cubic-bezier(0.15, 0, 0, 1); // https://cubic-bezier.com/#.15,0,0,1

$ease-in-sine: cubic-bezier(0.12, 0, 0.39, 0); // https://easings.net/#easeInSine
$ease-out-sine: cubic-bezier(0.61, 1, 0.88, 1); // https://easings.net/#easeOutSine
$ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1); // https://easings.net/#easeInOutSine

$ease-in-quad: cubic-bezier(0.11, 0, 0.5, 0); // https://easings.net/#easeInQuad
$ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1); // https://easings.net/#easeOutQuad
$ease-in-out-quad: cubic-bezier(0.45, 0, 0.55, 1); // https://easings.net/#easeInOutQuad

$ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0); // https://easings.net/#easeInCubic
$ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1); // https://easings.net/#easeOutCubic
$ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1); // https://easings.net/#easeInOutCubic

$ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0); // https://easings.net/#easeInQuart
$ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); // https://easings.net/#easeOutQuart
$ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); // https://easings.net/#easeInOutQuart

$ease-in-quint: cubic-bezier(0.64, 0, 0.78, 0); // https://easings.net/#easeInQuint
$ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); // https://easings.net/#easeOutQuint
$ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1); // https://easings.net/#easeInOutQuint

$ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0); // https://easings.net/#easeInExpo
$ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); // https://easings.net/#easeOutExpo
$ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1); // https://easings.net/#easeInOutExpo

// Most common durations
$duration-100: 100ms;
$duration-200: 200ms;
$duration-300: 300ms;
$duration-400: 400ms;
$duration-500: 500ms;
$duration-1000: 1000ms;

// Most common combinations
$ease-out-100: $duration-100 $ease-out;
$ease-out-200: $duration-200 $ease-out;
$ease-out-300: $duration-300 $ease-out;

$ease-in-out-cubic-200: $duration-200 $ease-in-out-cubic;

$ease-out-quint-200: $duration-200 $ease-out-quint;

$ease-in-expo-200: $duration-200 $ease-in-expo;
$ease-in-expo-300: $duration-300 $ease-in-expo;

$ease-out-expo-200: $duration-200 $ease-out-expo;
$ease-out-expo-300: $duration-300 $ease-out-expo;