This is a set of seven SVG illustrations animated via CSS with a slight help of JS. It mainly implements CSS keyframes compiled through Sass, and uses JS for centering to the origin the elements within each illustration that are being animated. Created by CodePen user Stefan (EntropyReversed)

This is a cookie policy consent toggle switch created with JS and SCSS. It uses SVG graphics to give form to the cookie icon that with the help of Tweenmax JS showcases a neat broken cookie transition. Created by CodePen user Darin (dsenneff).

This is an arrangement of boxes that on hover resize to take more space within its container. The hover properties and the width on the boxes are achieve through pure CSS but it also makes use of Sass variables only for setting colors and font sizes. This expanding grid was created by CodePen user Joel Duke.

This is an amazing shading effect for images that take advantage of the shading capabilities of OpenGL brought to the web through ThreeJS. Essentially it's just setting ThreeJS up so that it renders a flat surface upon which to draw the shader. Created by CodePen user Liam Egan.

This is a minimalistic images carousel built with FlexBox display layout and jQuery. The slider action is controlled via jQuery, styled by making use of pure CSS with a really nice transition effect that feels almost like if you were taking photographies. Created by CodePen user Veronica (@veronicadev).

This is an instant and strong password generator built with Vue.js 2. The UI consists on three stepped sliders positioned on the bottom, a center green slider showcasing the password’s strength and an upper box where you can check and copy the password itself. Created by CodePen user Nour Saud (@nourabusoud).

This is a set of hamburger menu icons with nice animations and subtle interactions. Each icon has hover states that really clues in the users to what is going to happen on click. Created by CodePen user Ahmad Emran.

This is a neat button effect that on hover showcases a radial gradient based on the mouse position relative to the button. It makes use of Sass variables that in tandem with JavaScript gives the relation of the mouse position and assigns the proper color gradient to the element. Created by CodePen user Tobias Reich.

A minimal text list with a neat slice effect for deleting the items on the list. It uses plain HTML in its structure with SVG close icons and CSS compiled through Sass for aiding in the transitions, transformation and general style of the text blocks while using the jQuery functions for triggering the actions. Created by CodePen user Aaron Iker.

This is a nice scrolling look book concept that uses some interesting displacement map transitions. It uses Three js for managing the WebGL 3D matrix for creating the displacement maps and TweenMax for animating the scene and create the general model for the transitions. Developed and designed in collaboration by CodePen user Jesper Landberg (ReGGae) and Dribbble user Nathan Riley.

This is a set of common menu icons that have been conveniently characterized for helping you identify the right kind of menu for your project. The menus have nice fluid transitions and include hamburger, doner, bento, kebab and meatball menu styles paired up with a set of close-icons that are showcased on hover. Original idea by Michael Babich, and brought to CodePen by user Olivia Ng.

This is a set of cards with fluid interactions recreating the "Motion Study" by Dribbble user Mauricio Vio. It is fully responsive, structured and styles with HTML and CSS preprocessed through Pug and Sass with the use of a javascript library for easily create an manage CSS polyfills. Created by CodePen user Jacob Foster.

A parallax scrolling element where the background text disappears into the background image. The effect is achieved by using a background image and a clipped version of the background that goes over the text layer. It is styled pure CSS and uses JS for the scrolling action of the element. Created by CodePen user Mikael Ainalem.

This is a recreation of a print menu from The Phoenicia Diner in Phoenicia, NY arranged using CSS Grid. The structure and the concept design of the overall layout emanates a retro style and a warm feeling. Created by CodePen user Jules Forrest.

This is a set of elements animated with UX principles that can be concatenated to your sources of inspiration for interactions and transitions. The animations are created mainly with the use of CSS Keyframes assisted with some Sass features. Created by CodePen user Praveen Bisht.

Anime.js is a lightweight JavaScript animation library (14kb minified, 6kb gzipped), with a simple, yet powerful API. It supports all modern browsers and can practically animate anything like CSS properties, SVG illustrations, DOM attributes and JavaScript Objects. Developed by GitHub user Julian Garnier (juliangarnier), licensed under the MIT license.

This is a pair of pure CSS message cards with nice soft animations and a pastel color palette. The cards are created and animated out of CSS precompiled through SCSS; even the illustrations are CSS-based. Created by CodePen user Julie Park.

This is a beautiful mouse-based parallax setup showcasing a sunset. Aside from using appealing SVG vector graphics, it uses vanilla JavaScript for tracking the mouse position and the consequent movement of the scene. You can also change the scenery with simple changes while keeping its dynamics. Created by CodePen user Adam Quinlan.

This is an unsubscribe section with an animated element and an emotional touch with it. The envelope character is a vector SVG element, animated via TweenMax's MorphSVGPlugin which is an advanced control over tweens that morph SVG paths. Created by CodePen user agathaco.

This is an amazing set of hamburger menu elements with fluid open and close animations. The elements are created by using SVG and are toggled using JavaScript actions within the same HTML structure. The toggle SVG line animations are achieved via CSS and the use of its transformation properties. Created by CodePen user Mikael Ainalem.

This is a neat login form with a snaky line animation for the focus' highlight. The element shows a login screen with the usual email and password inputs with a submit button, and as the user changes focus from one input to another the line gently slides between the inputs. Created by CodePen user Mikael Ainalem.

This is a colorful scrollable isometric card grid component. It makes use of CSS grid to organize the cards, and CSS variables with JavaScript to control the oblique scrolling. Created by CodePen user Jon Kantner.

A fluid mask slider working directly with the cursor's position to determine the range of the slider. The slider overlays the image beneath and gives it a filter to desaturate the image turning it into grayscale and revealing hidden text. Created by CodePen user Paul2512C.

This is a nice portfolio webpage design that merges code and graphics qualities into one. It makes use of SVG graphics, parallax displays, with a basic structure created with pug HTML and appropriately styled with CSS that also gives life to UX interactions and the use of react for displaying dynamically each component. Created by CodePen user Yago Estévez.

This is a set of cards originally inspired from the IOS 12 App store tab. It uses plain HTML for its basic structure, CSS table display for constructing the grid, with spot-on animations, and jQuery for the on-click pop-up action of the cards. Created by CodePen user Ryan Tarson.