Panel Animation

19.09.2019

Made with: HTML,CSS

View Code

Panel Animation

Budging Bars

21.08.2019

CSS-only line bar navigation.

Made with: HTML,CSS (SCSS)

View Code

PlaceholderBudging Bars

Expanding Sections

5.10.2018

Expanding sections on hover.

Made with: HTML,CSS

View Code

Expanding Sections

Expanding Panels

1.09.2018

Responsive flexbox expanding panels.

Made with: HTML (Pug),CSS (SCSS)

View Code

PlaceholderExpanding Panels

Panel Switch Interaction

21.07.2018

Panel switch interaction with flexbox and JS.

Made with: HTML,CSS (SCSS),JavaScript (Babel)

View Code

Panel Switch Interaction

Full-Width Panel Expansion

29.09.2017

A CSS only expanding panel gallery with CSS vars to progressively enhance with animation.

Made with: HTML,CSS (Less)

View Code

Full-Width Panel Expansion

Flex Panels

19.08.2017

This boxes resize when clicked. Try to click more than one and see what happens.

Made with: HTML,CSS,JavaScript

View Code

Flex Panels

Pure Css Hover

23.06.2017

Pure CSS hover panels.

Made with: HTML (Pug),CSS (Sass)

View Code

PlaceholderPure Css Hover

Multiple Sliding Panels

17.08.2016

Sliding panels around to give greater emphasis to the active panel. Uses only CSS :hover states with transform/opacity transitions for maximum performance.

Made with: HTML,CSS (Less)

View Code

Multiple Sliding Panels

Css-Only Sliding Panels Using Transforms

12.08.2016

Sliding panels around to give greater emphasis to the active panel. Uses only CSS :hover states with transform/opacity transitions for maximum performance. Responsively switches to a stacked layout on smaller screens, or by using the .panels--stacked class.

Made with: HTML,CSS (Less)

View Code

Css-Only Sliding Panels Using Transforms

Skewed Flexbox Panels

11.05.2016

Experimenting with skew transforms applied to a series of flexbox panels. Switches the flex-direction to columns for smaller screen sizes.

Made with: HTML (Pug),CSS (SCSS)

View Code

Skewed Flexbox Panels

Pure Css Panels

13.04.2015

This is an example of onepage panels navigation made with only CSS.

Made with: HTML,CSS (Less)

View Code

Pure Css Panels

Dual Sliding Panels

9.04.2015

Dual sliding panels with awesome CSS animations. Built with Stylus and vanilla JavaScript. Be sure to checkout the responsive view

Made with: HTML,CSS (Stylus),JavaScript

View Code

Dual Sliding Panels