Merging Animations/Transforms

This demo is exploring the assignment of multiple animations and transforms on a single element.

When using multiple animations on a single element two issues arise:

In order to merge animations, all keyframes should be set in both, and all properties should be set in all keyframes.

Still, I believe this demo represents a useful technique to mix and match animations in specific situations. The added features here:

One

Definition of single animations in JavaScript object

{
    'animations': {
        'scaleUp': {
            0 : { 'transform': 'scale(1)' },
            100 : { 'transform': 'scale(2.4)' }
        },
        'moveUp': {
            0 : { 'transform': 'translateY(0)' },
            100 : { 'transform': 'translateY(-110px)' }
        },
        'moveRight': {
            0 : { 'transform': 'translateX(0)' },
            100 : { 'transform': 'translateX(110px)' }
        }
    },
    'assignments': {
        '.box:nth-child(1)': 'scaleUp',
        '.box:nth-child(2)': 'moveUp',
        '.box:nth-child(3)': 'moveRight'
    }
};
			

Two

Assigning multiple animations to single DOM nodes (rotateY, translateX, translateY)

{
    'animations': {
        'rotateAside': {
            0 : { 'transform': 'rotateY(0deg)' },
            50 : { 'transform': 'rotateY(35deg)' },
            100 : { 'transform': 'rotateY(70deg)' }
        },
        'moveLeft1': {
            0 : { 'transform': 'translateX(0)' },
            50 : { 'transform': 'translateX(100px)' },
            100 : { 'transform': 'translateX(200px)' }
        },
        'moveLeft2': {
            0 : { 'transform': 'translateX(0)' },
            50 : { 'transform': 'translateX(200px)' },
            100 : { 'transform': 'translateX(400px)' }
        },
        'moveLeft3': {
            0 : { 'transform': 'translateX(0)' },
            50 : { 'transform': 'translateX(300px)' },
            100 : { 'transform': 'translateX(600px)' }
        },
        'moveUp': {
            0 : { 'transform': 'translateY(0)' },
            50 : { 'transform': 'translateY(-100px)' },
            100 : { 'transform': 'translateY(0)' }
        }
    },
    'assignments': {
        '.box:nth-child(1)': 'rotateAside',
        '.box:nth-child(2)': 'rotateAside,moveLeft1,moveUp',
        '.box:nth-child(3)': 'rotateAside,moveLeft2',
        '.box:nth-child(4)': 'rotateAside,moveLeft3,moveUp'
    }
};
			

Home

Fork me on GitHub