Wu-Knows. Comments - Answer Overflow

Wu-Knows.

•Created by Wu-Knows. on 2/13/2025 in #front-end

Easing Wizard: linear function doesn't seem to work

Ah I see the wiggle too! I don't try to add it when hovering, but on click. I think I can manage that from here 🙂 thank you

23 replies

KPCKevin Powell - Community

•Created by Wu-Knows. on 2/13/2025 in #front-end

Easing Wizard: linear function doesn't seem to work

23 replies

KPCKevin Powell - Community

•Created by Wu-Knows. on 2/13/2025 in #front-end

Easing Wizard: linear function doesn't seem to work

both Firefox and Chrome

23 replies

KPCKevin Powell - Community

•Created by Wu-Knows. on 2/13/2025 in #front-end

Easing Wizard: linear function doesn't seem to work

(all the divs close too but theres personal info there so that's why it's partial)

23 replies

KPCKevin Powell - Community

•Created by Wu-Knows. on 2/13/2025 in #front-end

Easing Wizard: linear function doesn't seem to work

<div class="project-container hidden">
    <div class="project-wrapper">
        <div class="project-header">
            <div class="project-title">Project One</div>
            <button class="project-exit-button">exit</button>
        </div>
        <div class="project-content">

<div class="project-container hidden">
    <div class="project-wrapper">
        <div class="project-header">
            <div class="project-title">Project One</div>
            <button class="project-exit-button">exit</button>
        </div>
        <div class="project-content">

23 replies

KPCKevin Powell - Community

•Created by Wu-Knows. on 2/13/2025 in #front-end

Easing Wizard: linear function doesn't seem to work

:root {
--wiggle: linear(0, 0.739 6.1%, 0.912 8.8%, 0.954 10.1%, 0.967 11.4%, 0.954 12.7%, 0.916 14%, 0.751 16.9%, -0.304 29%, -0.446 31.8%, -0.511 34.5%, -0.517 35.7%, -0.509 37%, -0.455 39.6%, 0.035 51.2%, 0.126 54.4%, 0.171 57.5%, 0.178 59.9%, 0.164 62.5%, 0.025 72.8%, -0.017 78.2%, -0.023 82.8%, -0.004 93%, 0);
}

.project-container.hidden {
    opacity: 0;
    display: block;
}

.project-container {
    z-index: 999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 3s var(--wiggle),
    opacity 0.3 linear;
    width: 100%;
    max-width: 700px;
}

:root {
--wiggle: linear(0, 0.739 6.1%, 0.912 8.8%, 0.954 10.1%, 0.967 11.4%, 0.954 12.7%, 0.916 14%, 0.751 16.9%, -0.304 29%, -0.446 31.8%, -0.511 34.5%, -0.517 35.7%, -0.509 37%, -0.455 39.6%, 0.035 51.2%, 0.126 54.4%, 0.171 57.5%, 0.178 59.9%, 0.164 62.5%, 0.025 72.8%, -0.017 78.2%, -0.023 82.8%, -0.004 93%, 0);
}

.project-container.hidden {
    opacity: 0;
    display: block;
}

.project-container {
    z-index: 999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 3s var(--wiggle),
    opacity 0.3 linear;
    width: 100%;
    max-width: 700px;
}

23 replies

KPCKevin Powell - Community

•Created by Wu-Knows. on 2/13/2025 in #front-end

Easing Wizard: linear function doesn't seem to work

Gaming

Programming