Experimenting With Scroll-Pushed corner-shape Animations

For the form’s shade I’m utilizing mix-blend-mode: distinction with background: white, which inverts the underlying layer, a classy impact that to a point solely maintains the identical degree of shade distinction. You gained’t need to apply this impact to every part, so right here’s a utility class to exclude the impact as wanted:

/* Added to playing cards */
.no-filter {
  isolation: isolate;
}

A comparability:

You’ll want to mix corner-shape with border-radius, which makes use of corner-shape: spherical below the hood by default. Sure, that’s proper, border-radius doesn’t really spherical corners — corner-shape: spherical does that below the hood. Reasonably, border-radius handles the x-axis and y-axis coordinates to attract from:

/* Syntax */
border-bottom-left-radius:  ;

/* Utilization */
border-bottom-left-radius: 50% 50%;
/* Or */
border-bottom-left-radius: 50%;

In our case, we’re utilizing border-bottom-left-radius: 100% to slip these coordinates to the other finish of their respective axes. Nonetheless, we’ll be overwriting the implied corner-shape: spherical in our @keyframe animation, so we seek advice from that with animation: bend-it-like-beckham. There’s no must specify a length as a result of it’s a scroll-driven animation, as outlined by animation-timeline: scroll().

Within the @keyframe animation, we’re animating from corner-shape: superellipse(notch), which is like an inset sq.. That is equal to corner-shape: superellipse(-infinity), so it’s not really squared nevertheless it’s so aggressively sharp that it seems squared. This animates to corner-shape: superellipse(sq.) (an outset sq.), or corner-shape: superellipse(infinity).

Animating corner-shape… revisited

The demo above is definitely a bit totally different to the one which I initially shared within the intro. It has one minor flaw, and I’ll present you the right way to repair it, however extra importantly, you’ll be taught extra about an intricate element of corner-shape.

The flaw: at the start and finish of the animation, the curvature seems fairly harsh as a result of we’re animating from notch and sq., proper? It additionally seems like the form is being sucked into the corners. Lastly, the form being caught to the edges of the viewport makes the entire thing really feel too contained.

The answer is straightforward:

/* Change this... */
inset: 0;

/* ...to this */
inset: -1rem;

This stretches the form past the viewport, and though this makes the animation seem to begin late and end early, we will repair that by not animating from/to -infinity/infinity:

@keyframes bend-it-like-beckham {
  from {
    corner-shape: superellipse(-6);
  }

  to {
    corner-shape: superellipse(6);
  }
}

Certain, which means that a part of the form is at all times seen, however we will fiddle with the superellipse() worth to make sure that it stays exterior of the viewport. Right here’s a side-by-side comparability:

And the unique demo (which is the place we’re at now):

Including extra scroll options

Scroll-driven animations work very properly with different scroll options, together with scroll snapping, scroll buttons, scroll markers, easy textual content fragments, and easy JavaScript strategies corresponding to scrollTo()/scroll(), scrollBy(), and scrollIntoView().

For instance, we solely have so as to add the next CSS snippet to introduce scroll snapping that works proper alongside the scroll-driven corner-shape animation that we’ve already arrange:

:root {
  /* Snap vertically */
  scroll-snap-type: y;

  part {
    /* Snap to part begin */
    scroll-snap-align: begin;
  }
}

“Masking” with corner-shape

Within the instance under, I’ve basically created a border across the viewport after which a notched form (corner-shape: notch) on prime of it that’s the identical shade because the background (background: inherit). This form fully covers the border at first, however then animates to disclose it (or on this case, the 4 corners of it):

If I make the form a bit extra seen, it’s simpler to see what’s taking place right here, which is that I’m rotating this form as properly (rotate: 5deg), making the form much more fascinating.

This time round we’re animating border-radius, not corner-shape. Once we animate to border-radius: 20vw / 20vh, 20vw and 20vh refers back to the x-axis and y-axis of every nook, respectively, that means that 20% of the border is revealed as we scroll.

The one different factor price mentioning right here is that we have to fiddle with z-index to make sure that the content material is greater up within the stacking context than the border and form. Apart from that, this instance merely demonstrates one other enjoyable means to make use of corner-shape:

@keyframes tech-corners {
  from {
    border-radius: 0;
  }

  to {
    border-radius: 20vw / 20vh;
  }
}

/* Border */
physique::earlier than {
  /* Fill (- 1rem) */
  content material: "";
  place: fastened;
  inset: 1rem;
  border: 1rem strong black;
}

/* Notch */
physique::after {
  /* Fill (+ 3rem) */
  content material: "";
  place: fastened;
  inset: -3rem;

  /* Rotated form */
  background: inherit;
  rotate: 5deg;
  corner-shape: notch;

  /* Animation settings */
  animation: tech-corners;
  animation-timeline: scroll();
}

primary {
  /* Stacking repair */
  place: relative;
  z-index: 1;
}

Animating a number of corner-shape parts

On this instance, we now have a number of nested diamond shapes because of corner-shape: bevel, all leveraging the identical scroll-driven animation the place the diamonds enhance in measurement, utilizing padding:

@keyframes diamonds-are-forever {
  from {
    padding: 7rem;
  }

  to {
    padding: 14rem;
  }
}

#diamonds {
  /* Middle them */
  place: fastened;
  inset: 50% auto auto 50%;
  translate: -50% -50%;

  /* #diamonds, the 
s inside */
  &, div {
    corner-shape: bevel;
    border-radius: 100%;
    animation: diamonds-are-forever;
    animation-timeline: scroll();
    border: 0.0625rem strong #00000030;
  }
}

primary {
  /* Stacking repair */
  place: relative;
  z-index: 1;
}


That’s a wrap


We simply explored animating from one customized superellipse() worth to a different, utilizing corner-shape as a masks to create new shapes (once more, whereas animating it), and animating a number of corner-shape parts directly. There are such a lot of methods to animate corner-shape apart from from one key phrase to a different, and if we make them scroll-driven animations, we will create some actually fascinating results (though, they’d additionally look superior in the event that they had been static).