We Keep Coding

Animation optimization in pure js

There is an animation of the flight of leaves in pure js. The problem is that it needs to be optimized for maximum performance, because there will be more animations of this kind on the page. Besides optimizing the original SVG image and reducing the number of leaflets, what tips can you give to improve the performance of your code?
var LeafScene = function(el) {
this.viewport = el;
this.world = document.createElement('div');
this.leaves = [];
this.options = {
numLeaves: 6,
wind: {
magnitude: 0,
maxSpeed: 12,
duration: 300,
start: 0,
speed: 10
},
};
this.width = this.viewport.offsetWidth;
this.height = this.viewport.offsetHeight;
this.timer = 0;
this._resetLeaf = function(leaf) {
leaf.x = this.width * 2 - Math.random()*this.width*1.75;
leaf.y = -10;
leaf.z = Math.random()*200;
if (leaf.x > this.width) {
leaf.x = this.width + 10;
leaf.y = Math.random()*this.height/2;
}
if (this.timer == 0) {
leaf.y = Math.random()*this.height;
}
leaf.rotation.speed = Math.random()*10;
var randomAxis = Math.random();
if (randomAxis > 0.5) {
leaf.rotation.axis = 'X';
} else if (randomAxis > 0.25) {
leaf.rotation.axis = 'Y';
leaf.rotation.x = Math.random()*180 + 90;
} else {
leaf.rotation.axis = 'Z';
leaf.rotation.x = Math.random()*360 - 180;
leaf.rotation.speed = Math.random()*3;
}
leaf.xSpeedVariation = Math.random() * 0.8 - 0.4;
leaf.ySpeed = Math.random() + 1.5;
return leaf;
}
this._updateLeaf = function(leaf) {
var leafWindSpeed = this.options.wind.speed(this.timer - this.options.wind.start, leaf.y);
var xSpeed = leafWindSpeed + leaf.xSpeedVariation;
leaf.x -= xSpeed;
leaf.y += leaf.ySpeed;
leaf.rotation.value += leaf.rotation.speed;
var t = 'translateX( ' + leaf.x + 'px ) translateY( ' + leaf.y + 'px ) translateZ( ' + leaf.z + 'px ) rotate' + leaf.rotation.axis + '( ' + leaf.rotation.value + 'deg )';
if (leaf.rotation.axis !== 'X') {
t += ' rotateX(' + leaf.rotation.x + 'deg)';
}
leaf.el.style.webkitTransform = t;
leaf.el.style.MozTransform = t;
leaf.el.style.oTransform = t;
leaf.el.style.transform = t;
if (leaf.x < -10 || leaf.y > this.height + 10) {
this._resetLeaf(leaf);
}
}
this._updateWind = function() {
if (this.timer === 0 || this.timer > (this.options.wind.start + this.options.wind.duration)) {
this.options.wind.magnitude = Math.random() * this.options.wind.maxSpeed;
this.options.wind.duration = this.options.wind.magnitude * 50 + (Math.random() * 20 - 10);
this.options.wind.start = this.timer;
var screenHeight = this.height;
this.options.wind.speed = function(t, y) {
var a = this.magnitude/2 * (screenHeight - 2*y/3)/screenHeight;
return a * Math.sin(2*Math.PI/this.duration * t + (3 * Math.PI/2)) + a;
}
}
}
}
LeafScene.prototype.init = function() {
for (var i = 0; i < this.options.numLeaves; i++) {
var leaf = {
el: document.createElement('div'),
x: 0,
y: 0,
z: 0,
rotation: {
axis: 'X',
value: 0,
speed: 0,
x: 0
},
xSpeedVariation: 0,
ySpeed: 0,
path: {
type: 1,
start: 0,
},
image: 1
};
this._resetLeaf(leaf);
this.leaves.push(leaf);
this.world.appendChild(leaf.el);
}
this.world.className = 'leaf-scene';
this.viewport.appendChild(this.world);
this.world.style.webkitPerspective = "400px";
this.world.style.MozPerspective = "400px";
this.world.style.oPerspective = "400px";
this.world.style.perspective = "400px";
var self = this;
window.onresize = function(event) {
self.width = self.viewport.offsetWidth;
self.height = self.viewport.offsetHeight;
};
}
LeafScene.prototype.render = function() {
this._updateWind();
for (var i = 0; i < this.leaves.length; i++) {
this._updateLeaf(this.leaves[i]);
}
this.timer++;
requestAnimationFrame(this.render.bind(this));
}
var leafContainer = document.querySelector('.falling-leaves'),
leaves = new LeafScene(leafContainer);
leaves.init();
leaves.render();
body, html {
height: 100%;
}
.falling-leaves {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 100%;
max-width: 880px;
max-height: 880px;
transform: translate(-50%, 0);
border: 20px solid #fff;
border-radius: 50px;
background-size: cover;
overflow: hidden;
}
.leaf-scene {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
transform-style: preserve-3d;
}
.leaf-scene div {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background: url(https://www.flaticon.com/svg/static/icons/svg/892/892881.svg) no-repeat;
background-size: 100%;
transform-style: preserve-3d;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<div class="falling-leaves"></div>

Unless you're using HTML Canvas, vanilla JS solutions are pretty heavy compared to CSS/JS hybrid because of the browser call stack.
It looks like this:
JS > Style > Layout > Paint > Composite
By minimizing the amount of calculations the browser has to do in JS and grouping reads/writes to the DOM you'll see a significant performance increase. The workload can be recorded with Chrome Dev tools under 'Performance' tab. And you'll be able to see every step the browser is taking to display the content. The less steps, the better performance .. simple as that.
You're writing to the DOM every single transform which is heavy even with 3d acceleration.
I usually make use of CSS variables and transitions for dynamic animation that I update in steps.
What you did is great otherwise. Try rendering on a HTML Canvas and your performance problems will vanish. Here's a start:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
But if you want or cant do canvas adapt to utilize CSS to not drop further than the Paint browser call for majority of frames.

Converting babel compiled code into regular js

I got an example code from codepen and I wanted to understand it better. I noticed that the js code is compiled with Babel. Since I'm quite new to JS I would be more comfortable to look at a standard javascript code, so I wanted to ask you if there's some way to convert a babel js into a regular js. I did some research but I couldn't find anything
By the way, this is the Babel code
const parent = document.getElementById("projects");
const closeButton = document.getElementById("project-close");
const projectItems = document.querySelectorAll(".project-item");
closeButton.addEventListener("click", onProjectClose);
projectItems.forEach(item => item.addEventListener("click", onProjectClick));
function onProjectClick(event) {
const { target } = event;
const { width, height, top, left } = target.getBoundingClientRect();
const clone = document.createElement("div");
clone.style.height = height + "px";
clone.style.width = width + "px";
clone.style.top = top + "px";
clone.style.left = left + "px";
clone.style.position = "absolute";
clone.style.zIndex = 10;
clone.classList.add("project-item");
clone.classList.add("clone");
clone.innerHTML = target.innerHTML;
document.body.appendChild(clone);
gsap.timeline().
to(clone, 1.5, {
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100vh",
ease: Expo.easeInOut }).
add(() => document.body.classList.add("project-page")).
set(clone, {
overflow: "auto" });
}
function onProjectClose() {
document.body.classList.remove("project-page");
const clone = document.querySelector(".clone");
gsap.to(clone, 1, {
clipPath: "inset(100% 0 100% 0)",
ease: Sine.easeInOut,
onComplete() {
clone.remove();
} });
gsap.to(clone.querySelector("img"), 1, {
scale: 0.7,
ease: Sine.easeInOut });
}

Performance of fabric.js with many items

I'm playing around with fabric.js and wonder how to tweak performance on handling object events when having a lot of items (more than 1500...).
I have build a little example:
https://codepen.io/skurrilewelt/pen/XWWvBoP
$(document).ready(function () {
var canvas = new fabric.Canvas('canvas');
var width = 10;
var height = 10;
var dist = 5;
function add(left, top) {
canvas.add(new fabric.Rect({
left: left,
top: top,
width: width,
height: height,
fill: 'green',
stroke: 'black',
strokeWidth: 1,
padding: 10,
draggable: false,
hasControls: false,
hasBorders: false,
}));
}
var col = 0;
var row = 0;
for (row = 0; row < 50; row++) {
for (col = 0; col < 30; col++) {
add(row * (width + dist), col * (height + dist));
}
}
canvas.renderOnAddRemove = false;
canvas.on({
'mouse:down': function (e) {
if (e.target) {
console.log(e.target);
canvas.getActiveObject().set("fill", '#f00');
canvas.renderAll();
}
}
});
canvas.renderAll();
});
If you click an rect you will have to wait approximatly 3 secs until the rect will change it's color.
Are there other approaches or can I enhance the performance of this? I will need up to 3500 objects...
Thanks in advance

JS .animate() not working in Firefox/IE

So I'm trying to animate a div but I'm not sure what I'm doing wrong here. The following code works just fine on the latest Safari and Chrome but not on Internet Explorer and Firefox.
On Firefox, the error being el.animate is not a function
Any suggestions/solutions?
var slowMo = false;
var dur = slowMo ? 5000 : 500;
function $(id) {
return document.getElementById(id);
}
var players = {};
var hue = 0;
function addTouch(e) {
var el = document.createElement('div');
el.classList.add('ripple');
var color = 'hsl(' + (hue += 70) + ',100%,50%)';
el.style.background = color;
var trans = 'translate(' + e.pageX + 'px,' + e.pageY + 'px) '
console.log(trans);
var player = el.animate([{
opacity: 0.5,
transform: trans + "scale(0) "
}, {
opacity: 1.0,
transform: trans + "scale(2) "
}], {
duration: dur
});
player.playbackRate = 0.1;
players[e.identifier || 'mouse'] = player;
document.body.appendChild(el);
player.onfinish = function() {
if (!document.querySelector('.ripple ~ .pad')) each(document.getElementsByClassName('pad'), function(e) {
e.remove();
});
el.classList.remove('ripple');
el.classList.add('pad');
}
}
function dropTouch(e) {
players[e.identifier || 'mouse'].playbackRate = 1;
}
function each(l, fn) {
for (var i = 0; i < l.length; i++) {
fn(l[i]);
}
}
document.body.onmousedown = addTouch;
document.body.onmouseup = dropTouch;
document.body.ontouchstart = function(e) {
e.preventDefault();
each(e.changedTouches, addTouch);
};
document.body.ontouchend = function(e) {
e.preventDefault();
each(e.changedTouches, dropTouch);
};
var el = document.body;
function prevent(e) {
e.preventDefault();
}
el.addEventListener("touchstart", prevent, false);
el.addEventListener("touchend", prevent, false);
el.addEventListener("touchcancel", prevent, false);
el.addEventListener("touchleave", prevent, false);
el.addEventListener("touchmove", prevent, false);
function fakeTouch() {
var touch = {
pageX: Math.random() * innerWidth,
pageY: Math.random() * innerHeight,
identifier: 'fake_' + Math.random() + '__fake'
}
addTouch(touch);
var length = Math.random() * 1000 + 500;
setTimeout(function() {
dropTouch(touch);
}, length)
setTimeout(function() {
fakeTouch();
}, length - 100)
}
if (location.pathname.match(/fullcpgrid/i)) fakeTouch(); //demo in grid
.ripple {
position: absolute;
width: 100vmax;
height: 100vmax;
top: -50vmax;
left: -50vmax;
border-radius: 50%;
}
body {
overflow: hidden;
}
.pad {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
<div class="pad"></div>
Code thanks to Kyle

So I took a different approach to achieve the same result. I think this one is a lot more straightforward and works in all browsers.
https://jsfiddle.net/cbrmuxcq/1/
Though there is a slight issue and I'm not sure what causes it. If I don't wait (by using setTimeout()), the transition doesn't happen but by setting a timeout it does. If anyone can spot the issue, I'll fix the fiddle and update my answer accordingly.

object:scaling is not working with bounding object

I am new in Fabric js. can anyone suggest me for restrict scale object within bounding box ?
my java-script code is below
(function(global) {
var canvas = new fabric.Canvas('maincanvas');
var yourNameObjs = [];
var goodtop =358, goodleft=250, boundingObject;
var boundingObject = new fabric.Rect({
left: 100,
top: 90,
width: 200,
height: 250,
opacity: 4,
selectable:false,
fill: 'red',
});
canvas.add(boundingObject);
addText = function(){
var nametoprint = $("#nametoprint").val();
canvas.remove(yourNameObjs);
yourNameObjs = new fabric.Text(nametoprint, {
left: 150, //Take the block's position
opacity: 9,
top: 150,
fontFamily: 'Delicious_500',
}
);
canvas.add(yourNameObjs);
canvas.on("object:moving", function(){
var obj = yourNameObjs;
var bounds = boundingObject;
obj.setCoords();
if(!obj.isContainedWithinObject(bounds)){
obj.setTop(goodtop);
obj.setLeft(goodleft);
} else {
goodtop = obj.top;
goodleft = obj.left;
}
});
canvas.on("object:scaling", function(){
var obj = yourNameObjs;
var bounds = boundingObject;
obj.setCoords();
if(!obj.isContainedWithinObject(bounds)){
obj.setTop(goodtop);
obj.setLeft(goodleft);
} else {
goodtop = obj.top;
goodleft = obj.left;
}
});
canvas.renderAll();
};
})();
html code is below
<input type="text" name="nametoprint" id="nametoprint" value="alex" />
<input type= "button" name="addtxt" id="addtxt" onclick="addText()" value="add text" />
<canvas id="maincanvas" style="border:1px solid #000;" width="400" height="450" ></canvas>
also i added this in fiddle here http://jsfiddle.net/pfgm8myp/
i want only allow to scale text object within the red bound box.moving object is working fine.i also added code for scaling but its not working.
can any one suggest me how to restrict this scaling ?
thanks in advance.

i posted it here with my own logic. http://jsfiddle.net/9xojfmyt/
i added below javascript code
(function(global) {
var canvas = new fabric.Canvas('maincanvas');
var yourNameObjs = [];
var goodtop =358, goodleft=250, boundingObject;
var boundingObject = new fabric.Rect({
left: 100,
top: 90,
width: 200,
height: 250,
opacity: 4,
selectable:false,
fill: 'red',
});
canvas.add(boundingObject);
addText = function(){
var nametoprint = $("#nametoprint").val();
canvas.remove(yourNameObjs);
yourNameObjs = new fabric.Text(nametoprint, {
left: 150, //Take the block's position
opacity: 9,
top: 150,
fontFamily: 'Delicious_500',
}
);
canvas.add(yourNameObjs);
// canvas moving limit
canvas.observe("object:moving", function(e){
var obj = yourNameObjs;
var bounds = boundingObject;
var objw = parseInt(parseInt(obj.width) * obj.scaleX);
var objh = parseInt(parseInt(obj.height) * obj.scaleY);
//left
if(obj.left < bounds.left){
obj.setLeft(bounds.left);
}
//top
if(obj.top < bounds.top){
obj.setTop(bounds.top);
}
//right
if((parseInt(obj.left) + objw) > (parseInt(bounds.left)+parseInt(bounds.width))){
obj.setLeft(((parseInt(bounds.left)+parseInt(bounds.width)) - objw));
}
//bottom
if((parseInt(obj.top) + objh) > (parseInt(bounds.top)+parseInt(bounds.height))){
obj.setTop(((parseInt(bounds.top)+parseInt(bounds.height)) - objh));
}
});
// canvas scaling limit
canvas.observe("object:scaling", function(e){
var obj = yourNameObjs;
var bounds = boundingObject;
var objw = parseInt(parseInt(obj.width) * obj.scaleX);
var objh = parseInt(parseInt(obj.height) * obj.scaleY);
//left
if(obj.left < bounds.left || (parseInt(obj.left) + objw) > (parseInt(bounds.left)+parseInt(bounds.width))){
obj.setLeft(bounds.left);
obj.setScaleX((bounds.width/obj.width));
}
//top
if(obj.top < bounds.top || (parseInt(obj.top) + objh) > (parseInt(bounds.top)+parseInt(bounds.height))){
obj.setTop(bounds.top);
obj.setScaleY((bounds.height/obj.height));
}
});
canvas.renderAll();
};
})();

Bit modification compare to Albert's answer. If you want to restrict object within canvas then replace moving event with below code.
// canvas scaling limit
canvas.observe("object:scaling", function(e){
var obj = e.target;
var bounds = {
left : 5, //here it keep 5 px margin from all direction
top : 5,
width : canvas.width - 10,
height : canvas.height - 10
};
var objw = parseInt(parseInt(obj.width) * obj.scaleX);
var objh = parseInt(parseInt(obj.height) * obj.scaleY);
//left
if(obj.left < bounds.left || (parseInt(obj.left) + objw) > (parseInt(bounds.left)+parseInt(bounds.width))){
obj.setLeft(bounds.left);
obj.setScaleX((bounds.width/obj.width));
}
//top
if(obj.top < bounds.top || (parseInt(obj.top) + objh) > (parseInt(bounds.top)+parseInt(bounds.height))){
obj.setTop(bounds.top);
obj.setScaleY((bounds.height/obj.height));
}
});