gsaw-JS v0.3 - More powerful, still just as easy: Configuration Options & Virtual Stylesheet Injection! - The Scipio Files #13

gsaw-JS v0.3 - More powerful, still just as easy: Configuration Options & Virtual Stylesheet Injection! - The Scipio Files #13

Hi everybody, I'm very excited to announce the release of gsaw-JS version 0.3! For this version, I implemented some feature requests from @flauwy and @fabiyamada. And that was actually pretty hard to do, but - as far as I'm concerned myself - a "must-have" feature as well!

In a nutshell, these were the request features to be implemented:

• @fabiyamada: add some "prism"-like background / border animation effects;
• @flauwy: keep gsaw-JS really easy to use, only HTML configurations needed on the user side.

The technical challenge involved: animating pseudo elements, that don't even exist in the CSS, via JavaScript, without touching the JavaScript...

Of course both feature requests - that I fully support - are valid. However, they're also pose a technical challenge to implement because it's not so easy via JavaScript animation instead of CSS3 Animations to animate pseudo elements. The effect @fabiyamada wants, involves animation the background and borders of an element, using another element. And that requires using an :after pseudo element in CSS. It's called a "pseudo element", kind of like a sibling of a "real" html element, because it doesn't really exist in the html DOM. It's a "CSS thing", yet JavaScript manipulates DOM elements. And of course those can be programmed manually, but that defeats the purpose of gsaw-JS and @flauwy's request: to keep gsaw-JS extremely easy-to-use, without the need for any JS skills and/or complex programmatic instructions, yet powerful.

The technical solution: injecting virtual stylesheet nodes at runtime

So... what I thought of, since GSAP also includes a "CSSPlugin.min.js", I can read pseudo element properties, and via "CSSRulePlugin.min.js" I can write pseudo element properties. So the only thing needed, is to create / inject "a virtual stylesheet at runtime", and use that!

Well so I did! :-)

// if needed, inject an extra stylesheet at runtime 
    if ( typeof gsaw_sheet == "undefined" )     
    {
        gsaw_sheet = (function() {  
            var style = document.createElement("style");        
            style.appendChild(document.createTextNode("")); // webKit hack  
            document.head.appendChild(style);
            return style.sheet;
        })();       
    }

And another solution: allow configurable user-defined CSS properties using a data attribute object

As a means to keep the configuration side of things for the gsaw-JS user on an html level, with a tiny bit of css maybe, I decided to use the html data-attribute, like so:

<a href="" class="gsaw-border-ripple inline-block" data-gsaw-config='{"borderColor": "rgb(67, 185, 139)", "borderWidth": 5}'>Border Ripple</a>  

For animation tweaking / configuration, the end user now only needs to change the object property values inside data-gsaw-config, and I'll just parse those in gsaw-JS via:

var config = JSON.parse($(this).attr("data-gsaw-config")) || {};

Cool huh! :-)

Added 5 more effects

These are - for now - the effects I've added using the technology as described above:

POW: Here is proof of my code commits to GitHub, regarding this v.0.3 version

v0.3 GitHub Commit: https://github.com/realScipio/gsaw-js/commit/ffe33546519ac7531d647a9798c19e5627c59e24

What's next for gsaw-JS v0.4?

More effects utilizing these new technical mechanisms of course! Now the sky's the limit! Please, feel free to suggest me more effects, because now I can add a lot more! ;-)

Please enjoy using gsaw-JS v0.3!!!

@scipio