twitter heart

Drawing

Heart

First part was the Heart.

I separated the full area in 4 rectangles :

• Top / Left and Top / Right : 25% high / 50% wide
• Bottom / Left and Bottom / Right : 75% high / 50% wide

And I used a pseudo element (:after) inside every rectangle and played withborder-radius property to be as close as possible to the original shape for each part.

Then I applied the color and overflow:hidden

Ring

The second part was the Ring.

This one is a simple rounded element with different border-size values andwidth / height values.

Circles

The third part was the Circles.

I built this one using a transparent rounded element in the middle and adding shadow boxes on it.

A shadow-box value for each circle, comma separated. The position x / y is computed based on the angle with sin / cos using Compass

Animation

Heart

Nothing too complex.

Increasing / decreasing the width / height of the main element (and setting the position left / top accordingly). The only thing is to make sure everything inside is relative to this element to adjust.

Ring

Adjusting the size of the border and the circle inside and the positionaccordingly as well as the color.

Circles

This one is a bit more tricky because all the border-shadow values have to be udpated all at the same time (position x / y, size, color) as it’s only one property with several comma separated values.

For instance :

https://medium.com/media/075a8b1c9c1260e019a7fa3bdfe8495b?maxWidth=700

And this is only for one step…

To make it easier to read and adjust, I created a SASS function to handle this :

https://medium.com/media/021981807b736ba6e4e4e0c1b288d69b?maxWidth=700

This function loops through all the Circles (stored in a SASS Map) and set 2 by 2 (the big and the small Circles) the box-shadow values accordingly, based on the distances, the sizes, the angle of shift between them and the progression in the color, all passed as arguments.

Completion

Then I adjusted the timings / percentages of the animations according to what is explained in this post https://medium.com/@chrismabry/how-did-they-do-that-the-twitter-like-animation-2a473b658e43 by @chrismabry

Therefore I separated in 28 steps

$animStep: 100% / 27;

that run in 0.8s

$animDuration: 0.8s;

using a function to generate the percentages of the various steps :

@function setStep($n) { @return ($n — 1) * $animStep }

For instance :

#{setStep(6)}

will output :

18.51852%

And make the three layers superimpose with the good timing.

A picture will be better than a long explanation :

The animation will be active / inactive just by adding / removing the class(.active) on the container (.heart-wrapper). In my example this class toggles on click.