An SCSS cubic bezier function?

Question

Many front end devs know how to use a cubic bezier function. Most of us know of them for their utility in animation easing. It seems that fewer people understand how a cubic-bezier function actually works, and how to create one (probably because that's less useful knowledge). I'm looking for an SCSS port of a cubic-bezier function and can't seem to find one, so I'm trying to make one.

EDIT: I thought I needed a bezier curve, but a polynomial approximation of a sine curve does the trick and is easy enough to pull off in SCSS.

My goal is to alter properties of a group of DOM elements using :nth-child() and a bezier curve to create a sinusoidal difference (or some other curve) from one element to the next. This is my current SCSS code, which will create a linear difference from one element to the next:

$steps: 4;

.class {
    @for $i from 1 through $steps {
        &:nth-child(#{$steps}n + #{$i}) {
            $width: 100 / $steps * $i;
            width: $width+em;
        }
    }
}

This would compile into CSS something like this:

.class:nth-child(4n+1) { width: 25em; }
.class:nth-child(4n+2) { width: 50em; }
.class:nth-child(4n+3) { width: 75em; }
.class:nth-child(4n+4) { width: 100em; }

I believe the way to achieve my goal is to multiply the width property in each step by a cubic bezier function that accepts five parameters:

@function cubic-bezier (x1, y1, x2, y2, epsilon) {
    // Epsilon is the width property at a step in the for loop.
}

Two things need to be solved:

Find or create an SCSS cubic bezier function.
Properly implement that function in the nth-child for loop.

MBo MBo · Accepted Answer · 2013-06-29T09:00:12

It seems you need not bezier curve, but some smooth curve with sinusoidal behavior at some interval. If you cannot use Sin function in your code, then try simple polynomial approximation. For example, function 20*x*(x-0.5)*(x-1) looks like one period of sinus at interval 0..1

wolfram alpha plot

An SCSS cubic bezier function?

1 Answers