sass-cubic-bezier-bounding-box

1.0.2 • Public • Published

Sass Cubic Bézier Bounding Box Build Status

This is a Sass function to calculate the bounding box of a cubic bézier. I created because I was using an easing function to zoom into an image on hover, but the image first zooms out bit. I needed to add an initial scale on the image so the initial zoom out wouldn’t ever cause the image to become smaller than its container.

The calculations come from this JSFiddle by Salix alba.

Here is a GIF of it in use:

Zooming out and in

Here’s the Sass that produced the effect:

@import 'cbbb';

$easing-control-points: 1, -0.6, 1, 1;

$final-scale: 10;

$min-max-y: -cbbb-min-max-y-from-control-list($easing-control-points);
$min-y: nth($min-max-y, 1);

$initial-scale: 1 - ($final-scale - 1)*$min-y;

.zoom-container {
  overflow: hidden;
  position: relative;

  img {
    transform: scale($initial-scale);
    transition: all 1s linear;
    transition-delay: 0.5s;
  }

  &:hover {
    img {
      transform: scale($final-scale);
      transition: all 3s cubic-bezier($easing-control-points);
    }
  }
}

Tests

This is tested with True.

npm install
npm test

Package Sidebar

Install

npm i sass-cubic-bezier-bounding-box

Weekly Downloads

6

Version

1.0.2

License

ISC

Last publish

Collaborators

  • backspace