SolidJS•2w ago

Improving Performance On CSS Transitions

I made a hover animation via CSS however it is very unoptimised, when i have a background behind it crawls to a halt. Its unbearably slow and i want to retain 99% of animation (including glows, scaling, backgroud animations and so on) and the this pattern background behind the cards(most likely due to the drop shadow),

.paper-pattern-background {
    width: 100vw;
    height: 80rem;
    position: absolute;
    opacity: 0.1;
    --color-in-use: rgb(var(--neutral));
    background-image:  linear-gradient(var(--color-in-use) 5.4px, transparent 5.4px), linear-gradient(90deg, var(--color-in-use) 5.4px, transparent 5.4px), linear-gradient(var(--color-in-use) 2.7px, transparent 2.7px), linear-gradient(90deg, var(--color-in-use) 2.7px, transparent 2.7px);
    background-size: 135px 135px, 135px 135px, 27px 27px, 27px 27px;
    background-position: -5.4px -5.4px, -5.4px -5.4px, -2.7px -2.7px, -2.7px -2.7px;
    mask-image: radial-gradient(
            ellipse 100% 60% at 50% 60%,
            #000 5%,
            transparent 50%
    );
}

.paper-pattern-background {
    width: 100vw;
    height: 80rem;
    position: absolute;
    opacity: 0.1;
    --color-in-use: rgb(var(--neutral));
    background-image:  linear-gradient(var(--color-in-use) 5.4px, transparent 5.4px), linear-gradient(90deg, var(--color-in-use) 5.4px, transparent 5.4px), linear-gradient(var(--color-in-use) 2.7px, transparent 2.7px), linear-gradient(90deg, var(--color-in-use) 2.7px, transparent 2.7px);
    background-size: 135px 135px, 135px 135px, 27px 27px, 27px 27px;
    background-position: -5.4px -5.4px, -5.4px -5.4px, -2.7px -2.7px, -2.7px -2.7px;
    mask-image: radial-gradient(
            ellipse 100% 60% at 50% 60%,
            #000 5%,
            transparent 50%
    );
}

Also the JSX for the cards is:

export default function CarouselCardComponent(props: {
    title: string;
    description: string;
    index: number;
    children: JSXElement
}) {
    return (
        <div class={`${styles["carousel-card-border-wrapper"]} ${styles["carousel-card-border-wrapper-" + props.index]}`}>
            <div class={`${styles["carousel-card"]} unselectable`}>
                <div class={styles["carousel-card-icon"]}>
                    {props.children}
                </div>
                <div class={styles["carousel-card-title"]}>{props.title}</div>
                <div class={styles["carousel-card-description"]}>{props.description}</div>
            </div>
        </div>
    );
}

export default function CarouselCardComponent(props: {
    title: string;
    description: string;
    index: number;
    children: JSXElement
}) {
    return (
        <div class={`${styles["carousel-card-border-wrapper"]} ${styles["carousel-card-border-wrapper-" + props.index]}`}>
            <div class={`${styles["carousel-card"]} unselectable`}>
                <div class={styles["carousel-card-icon"]}>
                    {props.children}
                </div>
                <div class={styles["carousel-card-title"]}>{props.title}</div>
                <div class={styles["carousel-card-description"]}>{props.description}</div>
            </div>
        </div>
    );
}

I also tried to use AnimeJS just in case i can improve the performance however it wasn't executing the stuff i wanted it todo

message.txt

4 Replies

McBrincie212OP•2w ago

here is a comparession between without the paper background and with

McBrincie212OP•2w ago

also sorry for no auto highlightting on the file also the reason i wanna keep it is because its a specific style im aiming for one idea is to make a seperate element that acts as the glow i found 2 ways to skyrocket the performance its way more optimised compared to the previous things

McBrincie212OP•2w ago

Gaming

Programming

Improving Performance On CSS Transitions

Did you find this page helpful?