Need help with awesome-css-variables?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

notoriousb1t
170 Stars 9 Forks 39 Commits 0 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 57,640
TypeScr...
CSS
splitti...
scroll-...
31 commits
# 45,860
CSS
splitti...
cash
jQuery
2 commits
# 452,124
HTML
CSS
1 commit
# 496,664
JavaScr...
TypeScr...
React
WordPre...
1 commit
# 77,455
HTML
PHP
custom-...
css-var...
1 commit

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.