Recreating Gmail’s Google Gemini Animation

The Fundamental CSS Styling

Every form is basically outlined with the identical field with the identical dimensions and margin spacing.

#geminianimation {
  width: 200px;
  aspect-ratio: 1/1;
  margin: 50px auto;
  place: relative;
}

We are able to clip the field to a selected form utilizing a pseudo-element. For instance, let’s clip a star form utilizing the CSS variable (--star) we outlined for it and set a background shade on it:

#geminianimation {
  width: 200px;
  aspect-ratio: 1;
  margin: 50px auto;
  place: relative;

  &::earlier than {
    content material: "";
    clip-path: var(--star);
    width: 100%;
    top: 100%;
    place: absolute;
    background-color: #494949;
  }
}

We are able to hook into the container’s youngster div and use it to determine the animation’s beginning form, which is the flower (clipped with our --flower variable):

#geminianimation div {
  width: 100%;
  top: 100%;
  clip-path: var(--flower);
  background: linear-gradient(135deg, #217bfe, #078efb, #ac87eb, #217bfe);
}

What we get is a star form stacked proper on high of a flower form. We’re virtually carried out with our preliminary CSS, however with the intention to recreate the animated shade wipes, we want a a lot bigger floor that permits us to “change” colours by shifting the background gradient’s place. Let’s transfer the gradient in order that it's declared on a pseudo ingredient as an alternative of the kid div, and dimension it up by 400% to provide us extra respiration room.

#geminianimation div {
  width: 100%;
  top: 100%;
  clip-path: var(--flower);

  &::after {
    content material: "";
    background: linear-gradient(135deg, #217bfe, #078efb, #ac87eb, #217bfe);
    width: 400%;
    top: 400%;
    place: absolute;
  }
}

Now we are able to clearly see how the shapes are positioned relative to one another:

Animating Phases 1 and 6

Now, I’ll admit, in my very own hubris, I’ve turned up my very personal schnoz on the humble transition property as a result of my considering is usually, Transitions are nice for getting began in animation and for fast issues, however actual animations are carried out with CSS keyframes. (Maybe I, too, am a Flooplegerp.)

However now I see the error of my methods. I can write a set of keyframes that rotate the star 180 levels, flip its shade white(ish), and have it keep that means for so long as the ingredient is hovered. What I can’t do is animate the star again to what it was when the ingredient is un-hovered.

I can, nonetheless, try this with the transition property. To do that, we add transition: 1s ease-in-out; on the ::earlier than, including the brand new background shade and rotating issues on :hover over the #geminianimation container. This accounts for the primary and sixth phases of the animation we outlined earlier.

#geminianimation {
  &::earlier than {
    /* Present types */
    transition: 1s ease-in-out;
  }
  &:hover {
    &::earlier than {
      remodel: rotate(180deg);
      background-color: #FAFBFE;
    }
  }
}

Animating Phases 2 and 5

We are able to do one thing comparable for the second and fifth phases of the animation since they're mirror reflections of one another. Keep in mind, in these phases, we’re spreading and contracting the flowery blue form.

We are able to begin by shrinking the interior div’s scale to zero initially, then broaden it again to its authentic dimension (scale: 1) on :hover (once more utilizing transitions):

#geminianimation {
  div {
    scale: 0;
    transition: 1s ease-in-out;
  }
  &:hover {
    div {
      scale: 1;
  }
}

Animating Part 3

Now, we very properly may deal with this with a transition like we did the final two units, however we most likely shouldn't do it… that's, until you wish to weep bitter tears and curse the day you first heard of CSS… not that I do know from private expertise or something… ha ha… ha.

CSS keyframes are a greater match right here as a result of there are a number of states to animate between that may require defining and orchestrating a number of completely different transitions. Keyframes are more proficient at tackling multi-step animations.

What we’re principally doing is animating between completely different shapes that we’ve already outlined as CSS variables that clip the shapes. The browser will deal with interpolating between the shapes, so all we want is to inform CSS which form we would like clipped at every part (or “part”) of this set of keyframes:

@keyframes shapeshift {
  0% { clip-path: var(--circle); }
  25% { clip-path: var(--flower); }
  50% { clip-path: var(--cylinder); }
  75% { clip-path: var(--hexagon); }
  100% { clip-path: var(--circle); }
}

Sure, we may mix the primary and final keyframes (0% and 100%) right into a single step, however we’ll want them separated in a second as a result of we additionally wish to animate the rotation on the similar time. We’ll set the preliminary rotation to 0turn and the ultimate rotation 1turn in order that it may possibly hold spinning easily so long as the animation is continuous:

@keyframes shapeshift {
  0% {
    clip-path: var(--circle);
    rotate: 0turn;
  }
  25% {
    clip-path: var(--flower);
  }
  50% {
    clip-path: var(--cylinder);
  }
  75% {
    clip-path: var(--hexagon);
  }
  100% {
    clip-path: var(--circle);
    rotate: 1turn;
  }
}

Word: Sure, flip is certainly a CSS unit, albeit one that usually goes missed.

We wish the animation to be easy because it interpolates between shapes. So, I’m setting the animation’s timing operate with ease-in-out. Sadly, this may also decelerate the rotation because it begins and ends. Nevertheless, as a result of we’re each starting and ending with the circle form, the truth that the rotation slows popping out of 0% and slows once more because it heads into 100% isn't noticeable — a circle seems to be like a circle regardless of its rotation. If we had been ending with a unique form, the easing can be seen and I'd use two separate units of keyframes — one for the shape-shift and one for the rotation — and name them each on the #geminianimation youngster div .

#geminianimation:hover {
  div {
    animation: shapeshift 5s ease-in-out infinite forwards;
  }
}

Animating Part 4

That stated, we nonetheless do want yet one more set of keyframes, particularly for altering the form’s shade. Keep in mind how we set a linear gradient on the mum or dad container’s ::after pseudo, then we additionally elevated the pseudo’s width and top? Right here’s that little bit of code once more:

#geminianimation div {
  width: 100%;
  top: 100%;
  clip-path: var(--flower);

  &::after {
    content material: "";
    background: linear-gradient(135deg, #217bfe, #078efb, #ac87eb, #217bfe);
    width: 400%;
    top: 400%;
    place: absolute;
  }
}

The gradient is that giant as a result of we’re solely displaying a part of it at a time. And which means we are able to translate the gradient’s place to maneuver the gradient at sure keyframes. 400% could be properly divided into quarters, so we are able to transfer the gradient by, say, three-quarters of its dimension. Since its mum or dad, the #geminianimation div, is already spinning, we don’t want any fancy actions to make it really feel like the colour is coming from completely different instructions. We simply translate it linearly and the spin provides some variability to what route the colour wipe comes from.

@keyframes gradientMove {
  0% {
    translate: 0 0;
  }
  100% {
    translate: -75% -75%;
  }
}

One ultimate refinement

As a substitute of utilizing the flower because the default form, let’s change it to circle. This smooths issues out when the hover interplay causes the animation to cease and return to its preliminary place.

And there you've it:

Wrapping up

We did it! Is that this precisely how Google completed the identical factor? In all probability not. In all honesty, I by no means inspected the animation code as a result of I needed to strategy it from a clear slate and work out how I'd do it purely in CSS.

That’s the enjoyable factor a couple of problem like this: there are alternative ways to perform the identical factor (or one thing comparable), and your means of doing it's prone to be completely different than mine. It’s enjoyable to see a wide range of approaches.

Which leads me to ask: How would you've approached the Gemini button animation? What concerns would you consider that perhaps I haven’t?