BridgeCSS

undefined

With BridgeCSS you can easily create engaging custom animations without a ton of utiltiy classes / ejecting out of utiltiy-frist to create keyframes.

For example, we will create an interactive animation that transitions between two UI states. You could take this example and incorporate it for example when a user logs in to change the view between the registration screen and a welcome modal etc.

@use 'src/bridge.scss' as *;

$radius: spacing(4);

.bg {
	background-color: $slate-600;
	border-radius: $radius;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: top left;
	transition: inherit;
	transition-property: transform, border-radius;

	[data-flipping] > & {
		transform: scaleY(calc(1 / var(--dh)));
		border-radius: calc((var(--dw)) * $radius) / calc((var(--dh)) * $radius);
	}
}

.container {
	@include space-y(5);
	width: spacing(100);

	display: grid;
	position: relative;
	align-items: center;
	margin: auto;

	transform-origin: top left;
	transition-property: transform;
	transition-duration: 0.5s;
	transition-delay: 0.5s;
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);

	> * {
		grid-area: 1 / 1;
	}

	&[data-flipping] {
		transition: none;
		transform: translateY(calc(-1px * var(--dy)));
	}
	&[data-state='big'] .content--big,
	&[data-state='small'] .content--small {
		position: relative;
		transition-delay: 1s;
		opacity: 1;
	}
}

.content {
	@include space-y(3);
	@include p(3);
	transition-property: opacity;
	transition-duration: 0.5s;
	transition-timing-function: linear;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	z-index: 10;
}

.filler {
	background-color: $gray-300;

	width: 50%;
	height: spacing(4);
	border-radius: spacing(1);

	&--full {
		width: 100%;
	}

	&--tall {
		height: spacing(8);
	}
}

Click Me