CSS & GSAP Animation Techniques

1915 Geoffkats

Open In Editor Publish Your Code

.left-door,
.right-door {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    transition: all 1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-attachment: scroll;
    background-repeat: no-repeat;
    border-radius: 10px;
    overflow: hidden;
}

.left-door {
    left: 0;
    background-image: url('./assets/img/2150714035.jpg');
    border-right: 2px solid rgba(0, 0, 0, 0.1);
}

.left-text{
    font-family: 'SparkyStonesRegular', monospace;
}

.right-text{
    font-family: 'SparkyStonesRegular', monospace;
}

.right-door {
    right: 0;
    background-image: url('./assets/img/loader-lefts.jpg');
    border-left: 2px solid rgba(0, 0, 0, 0.1);
}

.left-door::before,
.right-door::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3); /* Light white overlay */
    backdrop-filter: blur(6px);
    border-radius: 10px;
    pointer-events: none; /* Ensures underlying content is still interactable */
}

.left-door::before {
    border-right: 2px solid rgba(0, 0, 0, 0.1);
}

.right-door::before {
    border-left: 2px solid rgba(0, 0, 0, 0.1);
}

.text {
    position: relative;
    font-size: 4.8vw;
    font-weight: bold;
    font-family: 'SparkyStones', monospace;
    color: #ffffff;
    text-align: center;
    margin-left: 1.5cm;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.content {
    opacity: 0;
    transition: opacity 1s ease;
    text-align: center;
    padding: 50px;
}

CSS & GSAP Animation Techniques

Recommended

Button Hover Animation

CSS Button Hover Effect

HTML CSS Login Form Template

HTML

CSS

JS

Recommended

Button Hover Animation

CSS Button Hover Effect

HTML CSS Login Form Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS