The additive-transform-js from brettjephson

additive-transform-js's Introduction

Hi there 👋

Useful tools 🔨

AVPress - online video exporter
Colour Palettes - a search for colour palettes
ColorZilla - colour picker Chrome extension
Carbon - generate pretty code samples
Gradient generator - helps generate nice gradients in CSS with smoothed interpolation of the hues
WebPageTest - performance testing for web pages
Josh Comeau's shadow generator - generates fancy shadows.
Sprite generator - generate spritesheets for use in CSS

Useful articles

Easing gradients - using easing with gradients to make them look smoother and nicer
Intro to shadow palette generator - accompanying article for Josh Comeau's shadow generator tool

VS Code Extensions I'm using:

code --install-extension bierner.markdown-checkbox
code --install-extension bungcip.better-toml
code --install-extension CoenraadS.bracket-pair-colorizer
code --install-extension deque-systems.vscode-axe-linter
code --install-extension donjayamanne.githistory
code --install-extension eamodio.gitlens
code --install-extension esbenp.prettier-vscode
code --install-extension GitHub.vscode-pull-request-github
code --install-extension kumar-harsh.graphql-for-vscode
code --install-extension mhutchie.git-graph
code --install-extension ms-dotnettools.csharp
code --install-extension ms-python.python
code --install-extension ms-python.vscode-pylance
code --install-extension ms-toolsai.jupyter
code --install-extension rust-lang.rust
code --install-extension sdras.night-owl
code --install-extension silvenon.mdx
code --install-extension waderyan.gitblame

Tools I want to try out:

Cleanshot - screen shots and screen capture tool for Mac
Photopea - graphic design tool with Photoshop's features but open source and online

Rust

Started learning Rust.

Some useful crates:

cargo install cargo-edit
cargo install cargo-watch

Testing

additive-transform-js's People

Contributors

Stargazers

Watchers

additive-transform-js's Issues

Change method

Wouldn't it be easier to copy the transform value to the style? That way you can support all transforms, including 3D, without doing all the matrix calculations. Here is your original demo roughly modified: http://jsfiddle.net/Mottie/eGDP7/3/

function getCSSRulesForClass( selector ) {
    var sheets = document.styleSheets;
    var cssRules = [];
    for (var i = 0; i<sheets.length; ++i) {
        var sheet = sheets[i];
        if( !sheet.cssRules ) { continue; }
        for (var j = 0; j < sheet.cssRules.length; ++j ) {
            var rule = sheet.cssRules[j];
            if (rule.selectorText && rule.selectorText.split(',').indexOf(selector) !== -1) {
                var styles = rule.style;
                for( var k = 0; k<styles.length; ++k ) {
                    var style = styles[k];
                    cssRules.push( { 
                        property: style,
                        value: styles[style]
                    } );
                }
            }
        }
    }
    return cssRules;
}

var allTransformedNodes = document.querySelectorAll(".compoundtransform"),
    transformedNode,
    transformationSelectors,
    transformationSelector;

for( var i=0; i<allTransformedNodes.length; ++i ) {
    transformedNode = allTransformedNodes[i];
    transformationSelectors = transformedNode.getAttribute("data-transformations").split(/[\s+,]/);

    for( var j=0; j<transformationSelectors.length; ++j ) {
        transformationSelector = transformationSelectors[j];
        addTransform( transformedNode, "." + transformationSelector );
    }
}

function addTransform( transformedNode, transformationClass ) {                
    var transform,
        transformValue = '',
        transformationRules = getCSSRulesForClass( transformationClass );
    for( var i = 0; i<transformationRules.length; ++i ) {
        var rule = transformationRules[i];
        if ( /transform$/.test(rule.property) ) {
            transform = rule.property;
            transformValue += ' ' + rule.value;
        }
    }
    transformedNode.style[ transform ] += transformValue;
}

Modifying for CSS animations

Consider the following situation, I presume this is almost similar to what this plugin does.

Two animations having the transform properties is overridden by the second animation. That is the second animation starts from the initial position and not as an extension of what animation1 does.

A Stack Overflow question: http://stackoverflow.com/questions/32224802/extend-the-final-state-of-the-first-animation-for-translated-element describes that.

The element is moved to 20px, 20px at the final stage and not 35px, 35px.

animation-name: Translate1, Translate2;
@keyframes Translate1 {
    0% {
        transform: translate(0);
    }
    100% {
        transform: translate(15px, 15px);
    }
}

@keyframes Translate2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(20px, 20px);
    }
}

Is there a possibility of modifying this plugin for this purpose?

Recommend Projects