Skip to content

A curated list of all awesome libraries and resources for CSS Variables

Notifications You must be signed in to change notification settings

notoriousb1t/awesome-css-variables

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 

Repository files navigation

Awesome CSS Variables Awesome

Making a list of awesome CSS Variable resources and libraries (and dashing it twice!)

Table of Contents

Guides

Getting Started

Theming

Positioning

Responsive

Talks

Demos

Animation Engines

  • Flipping – A library (and collection of adapters) for implementing FLIP transitions. It has multiple strategies for completing FLIP transitions. The CSS adapter supports using CSS Variables – by David Khourshid
  • GSAP – "Ultra high-performance, professional-grade animation for the modern web." Among animation engines, the team claims it to be the fastest and the most backward compatible – by Greensock
  • Just Animate – A general animation engine that uses the Web Animation API for style based animation and has its own animation engine with an extensible plugin system for animating SVG, CSS variables, etc – by Christopher Wallis

CSS (Processors)

  • CSSPlus – A family of CSS reprocessing plugins that give you more power when writing CSS. It's called “CSSplus” because it's CSS plus JavaScript, the method most of these plugins use to add power to CSS is by having JavaScript dynamically update CSS variables with information about the browser and elements – by Tom Hodgins

HTML Processing

  • Splitting – A JavaScript microlibrary designed to split (section off) an element in a variety of ways, such as words, characters, child nodes, and more! Most Splitting methods utilize a series of s populated with CSS variables and data attributes unlocking transitions and animations that were previously not feasible with CSS – Stephen Shaw

Scrolling

  • BasicScroll – Standalone parallax scrolling for mobile and desktop with CSS variables. basicScroll allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want. Highly inspired by skrollr and Reactive Animations with CSS Variables – by Tobias Reich
  • ScrollOut – Install ScrollOut and decorate elements with the data-scroll attribute. As elements become visible, data-scroll will be set to in and when elements are scrolled out they will be set with out. Add your own CSS or JS to make a big impression when things come into view. That's it! Use the cssProps to animate based on scroll position and to do parallax – by Christopher Wallis

SVG

  • Lengthy – A JavaScript microlibrary (1.2kb min, 0.7kb gzipped) to get the length of SVG shapes. The length will automatically be added to the element as a CSS Var to make it easy to do CSS animations of SVG stroke-dashoffset for the wonderful line drawing SVG technique and other interesting animations – Stephen Shaw

Polyfills

  • IE11CustomProperties – A lightweight polyfill to enhance IE11 with CSS variables. Features: dynamic added content, respecting the cascade, pseudo-classes like :hover, js-integration (style.setProperty('--x','y')), and many more – Tobias Buschor

License

CC0

To the extent possible under law, Christopher Wallis has waived all copyright and related or neighboring rights to this work.

About

A curated list of all awesome libraries and resources for CSS Variables

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published