Press F12
and have fun!
The keyframes library can be accessed via K global variable.
The shape ids are #shape-1, #shape-2, #shape-3 and so on.
...or just play around with examples below...
Roll
var moveRight = K.chainEvenly(
K.ensureProperty('marginLeft', "0px"),
K.ensureProperty('marginLeft', "100px"),
K.ensureProperty('marginLeft', "200px"),
K.ensureProperty('marginLeft', "300px")
);
var ensureTransformOrigin = K.ensureProperty("transform-origin", "100% 100%");
var rotate90deg = K.transition('transform', 'rotateZ(0deg)', 'rotateZ(90deg)');
var rotate90degEased = K.easings.easeInOutExpo(rotate90deg)
var rotate90deg4times = K.repeat(4, rotate90degEased);
var roll = K.merge(ensureTransformOrigin, rotate90deg4times, moveRight);
var rollAndWaitABit = K.linger(.90, roll);
var rollRightThenBack = K.toAndFrom(rollAndWaitABit);
K.stream(4000, K.prerender(4000, rollRightThenBack), K.intoDom(document.getElementById('shape-1')))
Hide/show
var hide = K.tween({
transform: "scale(1) rotate(0deg)",
opacity: 1
}, {
transform: "scale(0.1) rotate(90deg)",
opacity: 0
});
var hideAndLinger = K.linger(.25, hide);
var hideThenShow = K.toAndFrom(hideAndLinger);
K.stream(2000, K.easings.easeInOutExpo(hideThenShow), K.intoDom(document.getElementById('shape-2')));
Stress test
var NR_RECTS = 500;
var markup = "";
for(var counter=0; counter<NR_RECTS; counter++){
markup += '<div class="rect" style=""></div>';
}
document.getElementById('shape-3').innerHTML = markup;
var rects = document.querySelectorAll("#shape-3 div");
var rotate = K.transition('transform', 'rotateZ(0deg)', 'rotateZ(360deg)');
var prerenderedRotate = K.prerender(500, rotate);
K.infiniteStream(500, rotate, function(state){
Object.keys(rects).forEach(function(index){
if('length' == index) return;
var rect = rects[index];
Object.keys(state).forEach(function(property){
rect.style[property] = state[property];
})
})
})
Rendering to CSS
var animation =K.toAndFrom(
K.easings.easeInExpo(
K.transition('transform', 'translateY(0px)', 'translateY(150px')
)
)
var keyframes = K.toCss('from-keyframes-js-with-love', 60, animation);
var css = "#shape-4{animation: from-keyframes-js-with-love 1s infinite}\n" + keyframes;
cssEditor.getSession().setValue( css );
document.getElementById('style-1').innerHTML = css;