Kevin Powell - Community•2w ago

Easing Wizard: linear function doesn't seem to work

I try to use the Easing Wizard from one of the latest vids from Kevin. However when I paste the code it says "unknown function linear". I tried to see if the code is working, but I don't see any differences. See screenshots

11 Replies

Chris Bolson•2w ago

Where are you getting the message "unknown function linear"? It is quite possible that your editor doesn't "know" that particular property/function but that doesn't mean that it won't work in the browser.

Wu-Knows.OP•2w ago

Oh right I checked VS-code and there I don't have the error. Unfortunately it still doesn't do anything haha

Chris Bolson•2w ago

That is strange! I have also used several of the easing functions created by that site over the last few days and they have all worked. What browser are you testing it on? Can you create a minimal CodePen (or similar) where we can see it?

ἔρως•2w ago

linear isnt a function i think it is 🤔 it was added super recently kinda probably a bug in vscode i cant reproduce the error - with sass or css can you click on the 3 dots and see what it says?

Wu-Knows.OP•2w ago

: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;
}

<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">

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

Chris Bolson•2w ago

What is the CSS that initiates/causes the transition?

Wu-Knows.OP•2w ago

Chris Bolson•2w ago

As you haven't provided it, I have created a quick class to add scale on hover to be able to test it:

.project-container:hover{
    transform: scale(2);
    opacity: 1;
}

.project-container:hover{
    transform: scale(2);
    opacity: 1;
}

And you are right, the transition timing function doesn't work, at least not as you have defined it. However it you break it up into individual transition declarations like this, it does work:

transition-property: transform, opacity;
transition-duration: 3s, 0.3s;
transition-timing-function: var(--wiggle), linear;

transition-property: transform, opacity;
transition-duration: 3s, 0.3s;
transition-timing-function: var(--wiggle), linear;

It is interesting that linear() doesn't work when using the shorthand when the shortand has more than one transition property defined. 🤔

Wu-Knows.OP•2w ago

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

Chris Bolson•2w ago

I have just created a completely new test and in this case the --wiggle (linear()) did work when defining it within the short-hand so I don't know what went wrong before.... I am going to try again with your code to see what I missed ah..... you where just missing the unit (s) on the duration for the opacity 🤦‍♂️ Easily done!

ἔρως•2w ago

yeah, sounds like a plugin is tripping up

Gaming

Programming

Easing Wizard: linear function doesn't seem to work

Did you find this page helpful?