Both stripe.com and vercel.com have a really cool code editor animation on their landing page, which when I inspect it, is compiled to HTML.
What javascript libraries are used to make these types of native web animations? Any npm packages to consider?
Isotope is a good library for JS animation. I thought will it be that difficult to write something in the likes of the Isotope JS library? Here I present Isometric. It is a small class that uses JQuery and Bootstrap 5.x.x. for CSS. Remember to include this below IsoMetric class into the head or put it into a separate .js, and then include it in the head of the HTML file
class IsoMetric {
// 1: ZoomOutMoveInAndZoomIn , 2: FadeOffAppearAndFadeIn, 3: ImplodeExplode, 4: Rotation
constructor(item_container, item_identifier, animationOption) {
this.animationOption = animationOption ? animationOption : 1;
this.jItemsContainer = $(item_container);
this.leftCont = this.jItemsContainer.position().left;
this.topCont = this.jItemsContainer.position().top;
this.wdCont = parseFloat(this.jItemsContainer.width());
this.htCont = parseFloat(this.jItemsContainer.height());
this.eleJArray = $(item_identifier);
this.eleArray = this.eleJArray.toArray();
this.allPositions = [];
let that = this;
$.each(this.eleJArray, function (index, ele) {
let $ele = $(ele);
let pos = $ele.position();
let onePos = { "x": pos.left + "px", "y": pos.top + "px", "w": $ele.width(), "h": $ele.height() };
that.allPositions.push(onePos);
$ele.attr(onePos);
let par = $ele;
//while (true) { //I restore width of all parents leading up to the container.
// par = $(par).parent();
// if (par[0] === that.jItemsContainer[0]) break;
// $(par).css({ "width": $(par).width(), "height": $(par).height() });
//}
});
$.each(this.eleJArray, function (index, ele) {
let $ele = $(ele);
$ele.css({ "position": "absolute", "left": $ele.attr("x"), "top": $ele.attr("y") });
});
this.jItemsContainer.css({ "width": this.wdCont + "px", "height": this.htCont + "px" });
}
TheClick(e, selector) {
$(e.target).siblings().removeClass("filter-active");
$(e.target).addClass("filter-active");
switch (this.animationOption) {
case 1:
this.ZoomOutMoveInAndZoomIn(e, selector);
break;
case 2:
this.FadeOffAppearAndFadeIn(e, selector);
break;
case 3:
this.ImplodeExplode(e, selector);
break;
case 4:
this.Rotation(e, selector);
break;
}
}
SetAnimation(option) {
this.animationOption = option;
}
ZoomOutMoveInAndZoomIn(e, selector) {
let boneEle = $(selector);
let that = this;
$.each(this.eleJArray, function (index, bEle) {
$(bEle).animate({
"width": 0,
"height": 0,
"left": parseFloat($(bEle).position().left) + parseFloat($(bEle).attr("w") / 2),
"top": parseFloat($(bEle).position().top) + parseFloat($(bEle).attr("h") / 2),
//"opacity": 0,
}, 800, function () {
//$(bEle).css({ "opacity": 0 });
//$(bEle).css({ "display": "none" });
});
});
$.each(boneEle, function (index, bEle) {
//$(bEle).css({ "display": "block" });
$(bEle).animate({
"left": that.allPositions[index].x,
"top": that.allPositions[index].y,
"width": $(bEle).attr("w"),
"height": $(bEle).attr("h"),
//"opacity": 1
}, 200);
});
}
FadeOffAppearAndFadeIn(e, selector) {
let boneEle = $(selector);
let that = this;
$.each(this.eleJArray, function (index, bEle) {
$(bEle).animate({"opacity": 0,}, 1000, function () {
$(bEle).css({ "width": 0, "height": 0 });
});
});
$(":animated").promise().done(function () {
//code here
$.each(boneEle, function (index, bEle) {
$(bEle).css({
"left": that.allPositions[index].x,
"top": that.allPositions[index].y,
"width": that.allPositions[index].w,
"height": that.allPositions[index].h
});
$(bEle).animate({
"opacity": 1
}, 1000);
});
});
}
ImplodeExplode(e, selector) {
let boneEle = $(selector);
let that = this;
let Cx = that.leftCont + (that.wdCont / 2); let Cy = that.topCont + (that.htCont / 2);
$.each(this.eleJArray, function (index, bEle) {
$(bEle).animate({
"left": Cx , //that.allPositions[index].x,
"top": Cy , //that.allPositions[index].y,
"width": 0,
"height": 0,
}, 100);
});
$(":animated").promise().done(function () {
//code here
$.each(boneEle, function (index, bEle) {
$(bEle).animate({
"left": that.allPositions[index].x,
"top": that.allPositions[index].y,
"width": $(bEle).attr("w"),
"height": $(bEle).attr("h"),
"opacity": 1
}, 800);
});
});
}
Rotation(e, selector) {
let boneEle = $(selector);
let that = this;
$.each(this.eleJArray, function (index, bEle) {
$({
deg: 0, w: $(bEle).width(), h: $(bEle).height(),
l: parseFloat($(bEle).position().left),
t: parseFloat($(bEle).position().top),
o: 1
}).animate({
deg: 360, w: 0, h: 0,
l: parseFloat($(bEle).position().left) + parseFloat($(bEle).attr("w") / 2),
t: parseFloat($(bEle).position().top) + parseFloat($(bEle).attr("h") / 2),
o: 0
}, {
duration: 1000,
index: index,
step: function () {
// in the step-callback (that is fired each step of the animation),
// you can use the `now` paramter which contains the current
// animation-position (`0` up to `angle`)
//let xx = parseFloat($(bEle).position().left) + parseFloat($(bEle).attr("w") / 2) + "px";
$(bEle).css({
transform: 'rotate(' + this.deg + 'deg)',
left: this.l,
top: this.t,
width: this.w,
height: this.h,
opacity: this.o
});
},
complete: function () {
//alert("sasa");
//$(bEle).css({ "opacity": 0 });
}
});
});
$(":animated").promise().done(function () {
//code here
$.each(boneEle, function (index, bEle) {
//$(bEle).css({ "opacity": 1 });
$({
deg: 360, w: 0, h: 0,
l: parseFloat($(bEle).position().left),
t: parseFloat($(bEle).position().top),
o: 0,
}).animate({
deg: 0,
w: that.allPositions[index].w, h: that.allPositions[index].h,
l: that.allPositions[index].x,
t: that.allPositions[index].y,
o: 1
}, {
duration: 1000,
index: index,
step: function () {
// in the step-callback (that is fired each step of the animation),
// you can use the `now` paramter which contains the current
// animation-position (`0` up to `angle`)
//let xx = parseFloat($(bEle).position().left) + parseFloat($(bEle).attr("w") / 2) + "px";
$(bEle).css({
transform: 'rotate(' + this.deg + 'deg)',
width: this.w,
height: this.h,
left: this.l,
top: this.t,
opacity: this.o
});
}
});
});
});
}}
JavaScript and CSS & JS Includes in the head of HTML:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<style>
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.side-car {
font-family: Tahoma, Geneva, Verdana, sans-serif;
font-size: 40px;
padding: 20px;
width: 100%;
height: 400px;
display: inline-block;
padding: 20px;
}
.col {
margin-bottom: 20px;
}
.filter-active {
text-decoration: underline;
font-weight: bolder;
}
</style>
<script type="text/javascript">
var theContactApp = {
iso_demo: {},
start_action: function () {
theContactApp.iso_demo = new IsoMetric(".TheContainer", ".my-item", 3);
theContactApp.doCarousel();
$("#animationOption").change((e) => theContactApp.DecideAnimation(e));
},
doCarousel: function () {
$('.carousel').carousel({
interval: 100,
wrap: true,
pause: 'hover'
});
},
DecideAnimation: function (e) {
theContactApp.iso_demo.SetAnimation(parseInt($(e.target).val()));
},
}; $(document).ready(() => theContactApp.start_action());
</script>
HTML in the body:
<section>
<div class="row">
<div class="col" style="margin-bottom:-10px;">
<h2 style="color:blue;">Click them and enjoy . . .</h2>
<span class="text-primary rounded-circle m-2" style="cursor:pointer;font-size:44px;" onclick="theContactApp.iso_demo.TheClick(event, '.my-all')">❉</span>
<span class="text-primary rounded-circle m-2 " style="cursor:pointer;font-size:44px;" onclick="theContactApp.iso_demo.TheClick(event, '.1')">➀</span>
<span class="text-primary rounded-circle m-2 " style="cursor:pointer;font-size:44px;" onclick="theContactApp.iso_demo.TheClick(event, '.2')">➁</span>
<span class="text-primary rounded-circle m-2 " style="cursor:pointer;font-size:44px;" onclick="theContactApp.iso_demo.TheClick(event, '.3')">➂</span>
<div class="m-2" style="float:right;">
<select class="form-select" id="animationOption" style="display:inline; color:darkgray;margin-top:-10px;">
<option value="1">ZoomOut Move In And ZoomIn</option>
<option value="2">FadeOff Appear And FadeIn</option>
<option value="3" selected>Implode AND Explode</option>
<option value="4">Rotation</option>
</select>
</div>
</div>
</div>
<hr />
<div class="container TheContainer">
<div class="row">
<div class="col">
<div class="display-6 overflow-hidden my-item 1 my-all">
<img style="display: block ; height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-1.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;" >1</span>
</div>
</div>
<div class="col">
<div class="display-6 overflow-hidden my-item 2 my-all">
<img style="display: block; height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-2.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">2</span>
</div>
</div>
<div class="col">
<div class="display-6 overflow-hidden my-item 3 my-all">
<img style="display: block;height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-3.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">3</span>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="display-6 overflow-hidden my-item 1 my-all">
<img style="display: block;height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-4.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">11</span>
</div>
</div>
<div class="col">
<div class="display-6 overflow-hidden my-item 2 my-all">
<img style="display: block;height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-5.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">22</span>
</div>
</div>
<div class="col">
<div class="display-6 overflow-hidden my-item 3 my-all">
<img style="display: block;height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-6.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">33</span>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="display-6 overflow-hidden my-item 1 my-all">
<img style="display: block;height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-7.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">111</span>
</div>
</div>
<div class="col">
<div class="display-6 overflow-hidden my-item 2 my-all">
<img style="display: block;height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-8.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">222</span>
</div>
</div>
<div class="col">
<div class="display-6 overflow-hidden my-item 3 my-all">
<img style="display: block;height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-9.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">333</span>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="display-6 overflow-hidden my-item 1 my-all">
<img style="display: block;height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-1.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">1111</span>
</div>
</div>
<div class="col">
<div class="display-6 overflow-hidden my-item 2 my-all">
<img style="display: block;height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-2.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">2222</span>
</div>
</div>
<div class="col">
<div class="display-6 overflow-hidden my-item 3 my-all">
<img style="display: block;height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-3.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">3333</span>
</div>
</div>
</div>
</div>
</section>
That is all folks, no external CSS needed, I have provided 4 effects, one can make more easily
I am being limited by the number of characters, I have an update of the IsoMetric class
class IsoMetric {
// 1: ZoomOutMoveInAndZoomIn, 2: FadeOffAppearAndFadeIn, 3: ImplodeExplode, 4: Rotation, 5: JustMove, 6: ExpandFadeMoveInAndZoomBack, 7: ScaleInScaleOut
// 8: RotationY
constructor(item_container, item_identifier, animationOption) {
this.animationOption = animationOption ? animationOption : 1;
this.jItemsContainer = $(item_container);
this.leftCont = this.jItemsContainer.position().left;
this.topCont = this.jItemsContainer.position().top;
this.wdCont = parseFloat(this.jItemsContainer.width());
this.htCont = parseFloat(this.jItemsContainer.height());
this.eleJArray = $(item_identifier);
this.eleArray = this.eleJArray.toArray();
this.allPositions = [];
let that = this;
$.each(this.eleJArray, function (index, ele) {
let $ele = $(ele);
let pos = $ele.position();
let onePos = {
"x": parseFloat(pos.left.toFixed(2)) + "px", "y": parseFloat(pos.top.toFixed(2)) + "px",
"w": parseFloat($ele.width().toFixed(2)), "h": parseFloat($ele.height().toFixed(2)),
"scale": 1
};
that.allPositions.push(onePos);
$ele.attr(onePos);
let par = $ele;
//while (true) { //I restore width of all parents leading up to the container.
// par = $(par).parent();
// if (par[0] === that.jItemsContainer[0]) break;
// $(par).css({ "width": $(par).width(), "height": $(par).height() });
//}
});
$.each(this.eleJArray, function (index, ele) {
let $ele = $(ele);
$ele.css({ "position": "absolute", "left": $ele.attr("x"), "top": $ele.attr("y"), "transform": "rotate(0deg) scale(1)" });
});
this.jItemsContainer.css({ "width": this.wdCont + "px", "height": this.htCont + "px" });
}
Filter(e, selector) {
switch (this.animationOption) {
case 1:
this.ZoomOutMoveInAndZoomIn(e, selector);
break;
case 2:
this.FadeOffAppearAndFadeIn(e, selector);
break;
case 3:
this.ImplodeExplode(e, selector);
break;
case 4:
this.Rotation(e, selector);
break;
case 5:
this.JustMove(e, selector);
break;
case 6:
this.ExpandFadeMoveInAndZoomBack(e, selector);
break;
case 7:
this.ScaleInScaleOut(e, selector);
break;
case 8:
this.RotationY(e, selector);
break;
}
}
SetAnimation(option) {
this.animationOption = option;
let that = this;
$.each(this.eleJArray, function (index, ele) {
let $ele = $(ele);
$ele.css({
transform: "rotate(0deg) scale(1)", opacity: 1,
left: that.allPositions[index].x, top: that.allPositions[index].y,
width: that.allPositions[index].w, height: that.allPositions[index].h,
});
});
}
ZoomOutMoveInAndZoomIn(e, selector) {
let boneEle = $(selector);
let that = this;
$.each(this.eleJArray, function (index, bEle) {
$(bEle).animate({
"width": 0,
"height": 0,
"left": parseFloat($(bEle).position().left) + parseFloat($(bEle).attr("w") / 2),
"top": parseFloat($(bEle).position().top) + parseFloat($(bEle).attr("h") / 2),
//"opacity": 0,
}, 200, function () {
//$(bEle).css({ "opacity": 0 });
//$(bEle).css({ "display": "none" });
});
});
$.each(boneEle, function (index, bEle) {
//$(bEle).css({ "display": "block" });
$(bEle).animate({
"left": that.allPositions[index].x,
"top": that.allPositions[index].y,
"width": $(bEle).attr("w"),
"height": $(bEle).attr("h"),
//"opacity": 1
}, 500);
});
}
FadeOffAppearAndFadeIn(e, selector) {
let boneEle = $(selector);
let that = this;
$.each(this.eleJArray, function (index, bEle) {
$(bEle).animate({ "opacity": 0, }, 2000, function () {
$(bEle).css({ "width": 0, "height": 0 });
});
});
$(":animated").promise().done(function () {
//code here
$.each(boneEle, function (index, bEle) {
$(bEle).css({
"left": that.allPositions[index].x,
"top": that.allPositions[index].y,
"width": that.allPositions[index].w,
"height": that.allPositions[index].h
});
$(bEle).animate({
"opacity": 1
}, 2000);
});
});
}
ImplodeExplode(e, selector) {
let boneEle = $(selector);
let that = this;
let Cx = that.leftCont + (that.wdCont / 2); let Cy = that.topCont + (that.htCont / 2);
$.each(this.eleJArray, function (index, bEle) {
$(bEle).animate({
"left": Cx, //that.allPositions[index].x,
"top": Cy, //that.allPositions[index].y,
"width": 0,
"height": 0,
}, 100);
});
$(":animated").promise().done(function () {
//code here
$.each(boneEle, function (index, bEle) {
$(bEle).animate({
"left": that.allPositions[index].x,
"top": that.allPositions[index].y,
"width": $(bEle).attr("w"),
"height": $(bEle).attr("h"),
"opacity": 1
}, 400);
});
});
}
Rotation(e, selector) {
let boneEle = $(selector);
let that = this; let count = 0; let sAngle = 0; let endEngle = 360 * 5;
$.each(this.eleJArray, function (index, bEle) {
$({
deg: sAngle, w: $(bEle).width(), h: $(bEle).height(),
l: parseFloat($(bEle).position().left),
t: parseFloat($(bEle).position().top),
o: 1
}).animate({
deg: endEngle, w: 0, h: 0,
l: parseFloat($(bEle).position().left) + parseFloat($(bEle).attr("w") / 2),
t: parseFloat($(bEle).position().top) + parseFloat($(bEle).attr("h") / 2),
o: 0
}, {
duration: 2000,
index: index,
step: function () {
// in the step-callback (that is fired each step of the animation),
// you can use the `now` paramter which contains the current
// animation-position (`0` up to `angle`)
//let xx = parseFloat($(bEle).position().left) + parseFloat($(bEle).attr("w") / 2) + "px";
$(bEle).css({
transform: 'rotate(' + this.deg + 'deg)',
left: this.l,
top: this.t,
width: this.w,
height: this.h,
opacity: this.o
});
},
complete: function () {
//alert("sasa");
//$(bEle).css({ "opacity": 0 });
++count;
}
});
});
function TheTheFinalAct() {
$.each(boneEle, function (index, bEle) {
//$(bEle).css({ "opacity": 1 });
$({
deg: endEngle, w: 0, h: 0,
l: parseFloat($(bEle).position().left),
t: parseFloat($(bEle).position().top),
o: 0,
}).animate({
deg: sAngle,
w: that.allPositions[index].w, h: that.allPositions[index].h,
l: that.allPositions[index].x,
t: that.allPositions[index].y,
o: 1
}, {
duration: 1000,
index: index,
step: function () {
// in the step-callback (that is fired each step of the animation),
// you can use the `now` paramter which contains the current
// animation-position (`0` up to `angle`)
//let xx = parseFloat($(bEle).position().left) + parseFloat($(bEle).attr("w") / 2) + "px";
$(bEle).css({
transform: 'rotate(' + this.deg + 'deg)',
width: this.w,
height: this.h,
left: this.l,
top: this.t,
opacity: this.o
});
}
});
});
}
//$(this.eleJArray).promise().done(function () {
// TheTheFinalAct();
//});
function WaitForAllAnimationsToBeOver() {
setTimeout(() => {
if (count >= that.eleArray.length) TheTheFinalAct();
else WaitForAllAnimationsToBeOver();
}, 500);
}
WaitForAllAnimationsToBeOver();
}
RotationY(e, selector) {
let boneEle = $(selector);
let that = this; let count = 0; let startAngle = 0; let endAngle = 360 * 5;
$.each(this.eleJArray, function (index, bEle) {
$({
deg: startAngle, w: $(bEle).width(), h: $(bEle).height(),
l: parseFloat($(bEle).position().left),
t: parseFloat($(bEle).position().top),
o: 1
}).animate({
deg: endAngle, w: 0, h: 0,
l: parseFloat($(bEle).position().left) + parseFloat($(bEle).attr("w") / 2),
t: parseFloat($(bEle).position().top) + parseFloat($(bEle).attr("h") / 2),
o: 0
}, {
duration: 2000,
index: index,
step: function () {
// in the step-callback (that is fired each step of the animation),
// you can use the `now` paramter which contains the current
// animation-position (`0` up to `angle`)
//let xx = parseFloat($(bEle).position().left) + parseFloat($(bEle).attr("w") / 2) + "px";
$(bEle).css({
transform: 'rotateY(' + this.deg + 'deg)',
//left: this.l,
//top: this.t,
//width: this.w,
//height: this.h,
opacity: this.o
});
},
complete: function () {
++count;
}
});
});
function TheTheFinalAct() {
$.each(boneEle, function (index, bEle) {
$({
deg: endAngle, w: 0, h: 0,
l: parseFloat($(bEle).position().left),
t: parseFloat($(bEle).position().top),
o: 0,
}).animate({
deg: startAngle,
w: that.allPositions[index].w, h: that.allPositions[index].h,
l: that.allPositions[index].x,
t: that.allPositions[index].y,
o: 1
}, {
duration: 1000,
index: index,
step: function () {
// in the step-callback (that is fired each step of the animation),
// you can use the `now` paramter which contains the current
// animation-position (`0` up to `angle`)
//let xx = parseFloat($(bEle).position().left) + parseFloat($(bEle).attr("w") / 2) + "px";
$(bEle).css({
transform: 'rotateY(' + this.deg + 'deg)',
//width: this.w,
//height: this.h,
left: this.l,
top: this.t,
opacity: this.o
});
}
});
});
}
function WaitForAllAnimationsToBeOver() {
setTimeout(() => {
if (count >= that.eleArray.length) TheTheFinalAct();
else WaitForAllAnimationsToBeOver();
}, 500);
}
WaitForAllAnimationsToBeOver();
}
JustMove(e, selector) {
let boneEle = $(selector);
let that = this;
$.each(this.eleJArray, function (index, bEle) {
$(bEle).animate({
"left": (that.leftCont + that.wdCont / 2) - that.allPositions[index].w / 2,
"top": (that.topCont + that.htCont / 2) - that.allPositions[index].h / 2,
}, 20, function () {
$(bEle).css({ "opacity": 0 });
});
});
$.each(boneEle, function (index, bEle) {
$(bEle).animate({
"left": that.allPositions[index].x,
"top": that.allPositions[index].y,
"opacity": 1
}, 200);
});
}
ExpandFadeMoveInAndZoomBack(e, selector) {
let boneEle = $(selector);
let that = this; let count = 0;
$.each(this.eleJArray, function (index, bEle) {
$({ scale: 1, o: 1 }).animate({ scale: 10, o: 0 },
{
duration: 1000,
index: index,
step: function () {
// in the step-callback (that is fired each step of the animation),
// you can use the `now` paramter which contains the current
// animation-position (`0` up to `angle`)
//let xx = parseFloat($(bEle).position().left) + parseFloat($(bEle).attr("w") / 2) + "px";
$(bEle).css({
transform: 'scale(' + this.scale + ')',
opacity: this.o
});
},
complete: function () {
//alert("sasa");
++count;
$(bEle).css({ "width": 0, "height": 0 });
}
});
});
function TheTheFinalAct() {
$.each(boneEle, function (index, bEle) {
$({
scale: 10, w: 0, h: 0, o: 0,
l: parseFloat($(bEle).position().left), t: parseFloat($(bEle).position().top),
}).animate({
scale: 1, w: that.allPositions[index].w, h: that.allPositions[index].h, o: 1,
l: that.allPositions[index].x, t: that.allPositions[index].y,
}, {
duration: 1000,
index: index,
step: function () {
$(bEle).css({
transform: 'scale(' + this.scale + ')',
left: this.l,
top: this.t,
width: this.w,
height: this.h,
opacity: this.o
});
}
});
});
}
function WaitForAllAnimationsToBeOver() {
setTimeout(() => {
if (count >= that.eleArray.length) TheTheFinalAct();
else WaitForAllAnimationsToBeOver();
}, 500);
}
WaitForAllAnimationsToBeOver();
}
ScaleInScaleOut(e, selector) {
let boneEle = $(selector);
let that = this; let count = 0;
$.each(this.eleJArray, function (index, bEle) {
$({ scale: 1 }).animate({ scale: 0 },
{
duration: 500,
index: index,
step: function () {
if (parseInt($(bEle).attr("scale")) !== 0) $(bEle).css({ transform: 'scale(' + this.scale + ')' });
},
complete: function () {
++count;
$(bEle).attr({ "scale": 0 });
}
});
});
function TheTheFinalAct() {
$.each(boneEle, function (index, bEle) {
$(bEle).attr({ "scale": 1 })
$({
scale: 0,
l: parseFloat($(bEle).position().left), t: parseFloat($(bEle).position().top),
}).animate({
scale: 1,
l: that.allPositions[index].x, t: that.allPositions[index].y,
}, {
duration: 1000,
index: index,
step: function () {
$(bEle).css({
transform: 'scale(' + this.scale + ')',
left: this.l,
top: this.t,
});
}
});
});
}
function WaitForAllAnimationsToBeOver() {
setTimeout(() => {
if (count >= that.eleArray.length) TheTheFinalAct();
else WaitForAllAnimationsToBeOver();
}, 500);
}
WaitForAllAnimationsToBeOver();
}
Sort(e, attrib, isAsc) {
let that = this;
//if (!this.eleArrAsc) {
this.eleArrAsc =
this.eleArray.sort(function (a, b) {
let lhs = parseInt($(a).attr(attrib));
let rhs = parseInt($(b).attr(attrib));
return isAsc ? lhs - rhs : rhs - lhs;
});
$.each(this.eleArrAsc, function (index, bEle) {
$(bEle).animate({
"left": that.allPositions[index].x,
"top": that.allPositions[index].y,
}, 200);
});
}
}
© 2022 - 2024 — McMap. All rights reserved.
react-syntax-highlighterand writing a custom animation for the text string passed to it. Which produced a reasonably nice type effect. Although it could be better. – Environmentalist