REVEAL ANIMATION OF THE TEXT

// MAIN TITLE REVEAL ANIMATION

$text-color: $main;
$background-color: #FEF9C1;

$animation-dur: 2s;
$animation-timing-func: ease-in-out;
$animation-iteration: 1;
$animation-fill-mode: forwards;
$animation-delay: 0.5s;

.reveal-animation {
	display: inline-block;
	position: relative;
	animation: fade $animation-dur $animation-timing-func $animation-iteration $animation-fill-mode;
	color: transparent;
	animation-delay: $animation-delay;
	&::after {
		content: '';
		background: $text-color;
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right: 0;
		animation: swipe $animation-dur $animation-timing-func $animation-iteration $animation-fill-mode;
		transform-origin: left 50%;
		transform: scaleX(0);
		animation-delay: $animation-delay;
	}
}

@keyframes swipe {
	0% { transform: scaleX(0); }
	50% { transform: scaleX(1); transform-origin: left 50%; }
	50.001% { transform: scaleX(1); transform-origin: right 50%; }
	100% { transform: scaleX(0); transform-origin: right 50%; }
}

@keyframes fade {
	0% { color: transparent;  }
	50% { color: transparent; }
	50.001% { color: $text-color; }
	100% { color: $text-color; }
}