Top 5 most hearted animations and designs on codepen, whats under the hood ?

Codepens 100 "The MOST HEARTED of 2020" list is out, and as usual consists of very exciting designs and animations,you can see the whole list here All are handcrafted with diverse skillsets. So in this post, I have chosen the top 5 and for each, I will give you a glimpse of what is under the hood, and indicate what skillsets are used to achieve such amazing creations. I will also give some resources for you to look up and research further.

1 Card Hover Interactions

by Ryan Mulligan
This creation took the top spot, it comprises three cards with scenic backgrounds and some text content. Hovering over the cards produces a very smooth animation of the different elements, this technique is called staggered animation.

You can inspect the core of the CSS transition animation by referring to block of code in the CSS from lines 171 to 204



@media (hover: hover) and (min-width: $bp-md) {
  .card:after {
    transform: translateY(0);
  }

  .content {
    transform: translateY(calc(100% - 4.5rem));

    > *:not(.title) {
      opacity: 0;
      transform: translateY(1rem);
      transition:
        transform var(--d) var(--e),
        opacity var(--d) var(--e);
    }
  }

  .card:hover,
  .card:focus-within {
    align-items: center;

    &:before { transform: translateY(-4%); }
    &:after { transform: translateY(-50%); }

    .content {
      transform: translateY(0);

      > *:not(.title) {
        opacity: 1;
        transform: translateY(0);
        transition-delay: calc(var(--d) / 8);
      }
    }
  }

Yes its a bit complex to explain because its written in sass and also uses variables, its basically using staggered CSS Transitions animation. You can learn more about it here : https://css-tricks.com/staggered-css-transitions/

Skillset needed

pug - This is used for generating HTML
sass - This is used to generate css
CSS - Transform animation, Responsive CSS grid, css variables
Resources
https://css-tricks.com/staggered-css-transitions/

2 Airplanes

by Steve Gardner
In this sleek animation, the scrollbar is used as a way to control the animation of the airplane. As you scroll the airplane flies in 3d, and the text content scrolls the opposite way.

This animation uses two different animation libraries. It uses three.js to deal with the 3D aspects of the model of the airplane, then uses greensocks scrollTrigger and drawsvg plugins to do large part of the animation. If you want to know how these things work then read more about it here:
scrollTrigger: https://greensock.com/scrolltrigger/
drawsvg: https://greensock.com/drawsvg/
three.js: https://threejs.org/

Skillset needed

HTML
sass - This is used to generate css
Key CSS techniques - Clip path, multiple background-images
SVG
Javascript - Use of three.js to create 3d models , use greensocks animation libraries especially scrollTrigger.
Resources
GSAP: https://greensock.com/get-started/
scrollTrigger: https://greensock.com/scrolltrigger/
drawsvg: https://greensock.com/drawsvg/
three.js: https://threejs.org/

3 CSS Grid: Newspaper Layout

by Olivia Ng

This is a clever precision engineered layout to simulate an old fashioned newspaper layout that is also responsive. This is a good example of how to configure a complex design layout to fit all screen sizes.

The most important trickery to note here is how some of the nested layout is defined by the use of column-count. Usually, most people use CSS grid for the main grid and use flex box to achieve a nested layout within the grid. But a better cleaner solution is to use column-count. From the screenshot below, You can see how the bottom highlighted content is defined with column-count:2 :

And the main grid area config is shown below labeled as 1 in the screenshot. The second style property, labeled 2, shows how one of the grid area is defined.

Skillset needed

Pug - Generates html
SASS - Creates css
CSS variables
CSS - An advanced understanding of Grid plus the use of column-count.
Resources
https://css-tricks.com/snippets/css/complete-guide-grid/
https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

4 Candy Color Button Animation

by Yuhomyan
This is a collection of 16 buttons each with its individual animation applied in the css. The animation ranges from changing colors of background, applying gradients to 3d rotation.

below is the properties for button 12, this has a 3d rotation applied to 2 surfaces of the button. Rotation is applied with "transform: rotateX(-90deg);" setting:



.btn-12 span:nth-child(2) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}
.btn-12:hover span:nth-child(1) {
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.btn-12:hover span:nth-child(2) {
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
 color: transparent;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}

Skillset needed

HTML
CSS - Average understanding of CSS and specifically transition and keyframe animation. Also how to apply multiple shadows and linear gradients.
Resources
https://developer.mozilla.org/en-US/docs/Web/CSS/animation
https://www.youtube.com/watch?v=cH0TC9gWiAg

5 Impossible Checkbox v2

by Jhey
This is an svg animation created using GSAP timeline animation. It's like a little game with a character. When you click on the check box switch it moves to the other side, then you see a little paw switch it back. When you keep clicking on it a bear gradually reveals itself, then it gets angry. Try it out yourself! The actual bear is a set of svg drawings that consist of three parts as shown below :

The trick is to hide these parts behind the button switch and animate them separately with co-ordination. That's where GSAP comes in. You can use the timeline feature in GSAP to construct the animation of the different assets so that you have better control over your animation. There are also some rules built into the animation so that different variations of the animations are presented depending on the number of times the switch has been clicked. This demo is built using react.js, and the bulk of the animation logic is inside the useEffect hook which starts at line 53. At line 82 is particularly important, that's where the timeline is declared, which looks like :const bearTL = timeline({ delay: Math.random(), onComplete })

Skillset needed

Pug - Generates html
Stylus - Generates css
SVG - Good understanding of how to create and manipulate svg artwork especially for animation.
Javascript - ReactJS framework, GSAP animation using timeline
Resources
Gsap - https://greensock.com/get-started/

Hope you enjoyed this review and dont forget to read my other posts...