Skip to content
primary
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

A Sass function to get the bounding box of a cubic bézier

Resources

Packages

No packages published