My idea is to make an image to dissect into small pieces that will shrink as they fly away.
I managed to do this with a few CSS animations - scale + translate3d - (the results are small, but this is the beginning).
Now the problem is that I would like the translations to be random. As I understand it, there is an easy way to use JS / JQuery / GSAP and a slightly more complicated way to use SCSS / Sass ...
I am not familiar with all of them.
I found code that uses javascript to randomize rotation, and I adapted it to my translation.
The code was sent here as an answer.
// search the CSSOM for a specific -webkit-keyframe rule function findKeyframesRule(rule) { // gather all stylesheets into an array var ss = document.styleSheets; // loop through the stylesheets for (var i = 0; i < ss.length; ++i) { // loop through all the rules for (var j = 0; j < ss[i].cssRules.length; ++j) { // find the -webkit-keyframe rule whose name matches our passed over parameter and return that rule if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && ss[i].cssRules[j].name == rule) return ss[i].cssRules[j]; } } // rule not found return null; } // remove old keyframes and add new ones function change(anim) { // find our -webkit-keyframe rule var keyframes = findKeyframesRule(anim); // remove the existing 38% and 39% rules keyframes.deleteRule("38%"); keyframes.deleteRule("39%"); // create new 38% and 39% rules with random numbers keyframes.insertRule("38% { -webkit-transform: translate3d("+randomFromTo(-100,100)+"vw,"+randomFromTo(-100,100)+"vw,0vw); }"); keyframes.insertRule("39% { -webkit-transform: translate3d("+randomFromTo(-100,100)+"vw,"+randomFromTo(-100,100)+"vw,0vw); }"); // assign the animation to our element (which will cause the animation to run) document.getElementById('onet').style.webkitAnimationName = anim; } // begin the new animation process function startChange() { // remove the old animation from our object document.getElementById('onet').style.webkitAnimationName = "none"; // call the change method, which will update the keyframe animation setTimeout(function(){change("translate3d");}, 0); } // get a random number integer between two low/high extremes function randomFromTo(from, to){ return Math.floor(Math.random() * (to - from + 1) + from); }
So here is this part:
$(function() { $('#update-box').bind('click',function(e) { e.preventDefault(); startChange(); }); });
Which I'm not sure, but I assume that it is a function to run the startChange function.
Now. In my case, I would like the function to start automatically, and since the animation should continue to play, it will have to loop endlessly.
Any ideas how to do this? I think I could use onAnimationEnd .. But obviously I don’t know how to write it ...