A landing page design concept for Fitbit Alta where the background color changes when you click on the palette selector to match the Fitbit color u...

A landing page design concept for Fitbit Alta where the background color changes when you click on the palette selector to match the Fitbit color using JavaScript. The page section has a translucid background with border shades to give a depth effect that blends perfectly with the overall main background that matches in color with the Showcased item. Created by CodePen user Julie Park.

A foot tapping animation with a flat art style that can be used as a preloader. It uses SVG animated with GreenSock (GSAP) and their Morph SVG plug...

A foot tapping animation with a flat art style that can be used as a preloader. It uses SVG animated with GreenSock (GSAP) and their Morph SVG plugin. This loader animation was created by CodePen user Darin.

A long list of pure CSS effects that can be used on buttons, text or any hoverable element. The CSS effects are pre-compiled through Sass, showcase...

A long list of pure CSS effects that can be used on buttons, text or any hoverable element. The CSS effects are pre-compiled through Sass, showcased with buttons structured in HTML via PUG. Created by CodePen user strafeOK

A set of card elements that flip with a 3D effect when you hover over them. The cards are conveniently structured with PUG and the 3D flip effect i...

A set of card elements that flip with a 3D effect when you hover over them. The cards are conveniently structured with PUG and the 3D flip effect is achieved through CSS compiled with SASS. Created by CodePen user Charles Ojukwu.

A set of demonstrative text effects built with the Javascript library Splitting.js. These animations/transitions are all done with CSS after using ...

A set of demonstrative text effects built with the Javascript library Splitting.js. These animations/transitions are all done with CSS after using the Splitting micro-library that adds helper spans and CSS variables. Created by CodePen user Shaw.

This is a set of four different SVG animations for menu buttons. When toggled, they change from a normal triple bar option icon to a cross or back ...

This is a set of four different SVG animations for menu buttons. When toggled, they change from a normal triple bar option icon to a cross or back arrow icon. Created by CodePen user Tamino Martinius.

A menu section with a cool on hover animation for each option and a toggle status activated on click. It uses Stylus CSS as preprocessor and JavaSc...

A menu section with a cool on hover animation for each option and a toggle status activated on click. It uses Stylus CSS as preprocessor and JavaScript compiled through Babel.js. Created by CodePen user Adrián Guerrero González.

A 3D isometric element that transforms into a flat element when on hover. It is perfect for showcasing images, cards and in general any element wit...

A 3D isometric element that transforms into a flat element when on hover. It is perfect for showcasing images, cards and in general any element with a flat structure. It uses SCSS as a precompiler but it's pure CSS in the essence that doesn't use any JS flavor. Created by CodePen user Eduardo Bouças.

This is a set of 8 animated elements that can be perfectly set as loaders. The animations are achieved via keyframes in CSS pre-compiled through SC...

This is a set of 8 animated elements that can be perfectly set as loaders. The animations are achieved via keyframes in CSS pre-compiled through SCSS. Created by CodePen user Paolo Duzioni.

This is an eCommerce grid layout used to showcase footwear and apparel. It has box elements styled and animated with CSS and jQuery working as a lo...

This is an eCommerce grid layout used to showcase footwear and apparel. It has box elements styled and animated with CSS and jQuery working as a looper for making an infinite tiled grid; all with a beautiful color palette that helps to keep the attention in the merch. Created by CodePen user Andy Barefoot.

A droplet scroll animation for the three-lined button on a navbar. It helps saving space in your website by avoiding sticky or auto-hide options on...

A droplet scroll animation for the three-lined button on a navbar. It helps saving space in your website by avoiding sticky or auto-hide options on scrollbars. This menu also makes use of a flat style art keeping it simple yet stylish. Created by CodePen user Leon Heess.

An active tab indicator that on toggle showcases a fluid animated transition over the active element. It's styled with Sass and uses jQuery for ani...

An active tab indicator that on toggle showcases a fluid animated transition over the active element. It's styled with Sass and uses jQuery for animating the selector. Created CodePen user by Aaron Iker.

A set of 8 hover animations that give motion to each letter in a phrase using GSAP (JavaScript Library for animations) and a custom JS letter wrapp...

A set of 8 hover animations that give motion to each letter in a phrase using GSAP (JavaScript Library for animations) and a custom JS letter wrapper function. Created by CodePen user Ryan Mulligan.

4 tariff cards in an isometrical view with a flip animation effect. The cards use stylus CSS with material colors, shades and a slightly satin touc...

4 tariff cards in an isometrical view with a flip animation effect. The cards use stylus CSS with material colors, shades and a slightly satin touch that gives them a feeling of deepness and spatial location, perfectly encompassed with the smooth motion generated when on-hover. Created by CodePen user Andreas Storm.

An on-hover effect showcased over a set of buttons on a column arrangement. The effect is revealed with a circular shape that expands itself in a l...

An on-hover effect showcased over a set of buttons on a column arrangement. The effect is revealed with a circular shape that expands itself in a linear motion, taking over the whole button background while on-hover. Created by CodePen user Sammy Helali.

An event card list built with Vue cards made to display upcoming or past events to users. The users can filter between important, upcoming, and pas...

An event card list built with Vue cards made to display upcoming or past events to users. The users can filter between important, upcoming, and past events. Above the filter is a search bar that can filter the list using a clientside fuzzy search algorithm. Created by CodePen user Noah.

A set of underline CSS text effects that on hover animates and exposes different highlight styles for text sections in a smooth linear motion. The ...

A set of underline CSS text effects that on hover animates and exposes different highlight styles for text sections in a smooth linear motion. The effects are coded in SCSS and structured in a simple HTML layout. Created by CodePen user @cecilehabran.

A Navbar menu with an active on hover round selector that changes its shape for each option on the element. The forms are achieved by making use of...

A Navbar menu with an active on hover round selector that changes its shape for each option on the element. The forms are achieved by making use of SVG and its morphing capabilities. Created by CodePen user Dejan Babić.

A dynamic background gradient that changes its colors on scroll action, adapted from a scroll indicator. The effect works by overlaying two gradien...

A dynamic background gradient that changes its colors on scroll action, adapted from a scroll indicator. The effect works by overlaying two gradients, one dynamic and the other fixed, both locked to the viewport dimensions and pulled behind the text, similar to the scroll indicator. Created by CodePen user Mike Riethmuller.

A collection of 6 animated Google loaders built in SCSS. The elements animations are smooth and balanced with no visual lag, and each with unique s...

A collection of 6 animated Google loaders built in SCSS. The elements animations are smooth and balanced with no visual lag, and each with unique shape and motion. Created by CodePen user Amine Bahmed.

A lazy loader using blazy library for asynchronous loading of images. It has a 3d transition effect on scroll and it's configured to use different ...

A lazy loader using blazy library for asynchronous loading of images. It has a 3d transition effect on scroll and it's configured to use different images for mobile and desktop. Created by CodePen user Hamsa Ganesh.

A form validation built with React, highly interactive and user-friendly. Created by CodePen user Mikhail Proniushkin.

A form validation built with React, highly interactive and user-friendly. Created by CodePen user Mikhail Proniushkin.

Beautiful northern aurora lights animation for footer sections built in pure CSS. In a nutshell, CSS animates and modify size and colors of the ele...

Beautiful northern aurora lights animation for footer sections built in pure CSS. In a nutshell, CSS animates and modify size and colors of the element's bottom section; to make the desired impact, neon colors are used over a black background. Element created by CodePen user Amit Ashok Kamble.

A sidebar box that on scroll moves with the display within its column frame until it gets in contact with the next element. The element is styled w...

A sidebar box that on scroll moves with the display within its column frame until it gets in contact with the next element. The element is styled with CSS and its collision detection system is made with jQuery. Created by CodePen user Charlotee Dann.

A set of UI cards made mainly with CSS with a highly interactive 3D effect. The cards have a VR inspired layout and are direction aware when on hov...

A set of UI cards made mainly with CSS with a highly interactive 3D effect. The cards have a VR inspired layout and are direction aware when on hover. Created by CodePen user Piotr Galor.