Wobbly list

Developer

Size

5,672 Kb

Views

8,096

Wobbly list Previews
Wobbly list HTML Codes
Wobbly list CSS Codes
Wobbly list JS Codes

How do I make an wobbly list?

List items that transition on scroll start/stop to give the effect of soft physical constraints. Initial idea was for this movement to be vertical, but that was obviously a UX nightmare.... What is a wobbly list? How do you make a wobbly list? This script and codes were developed by Ross B on 05 January 2023, Thursday.

Wobbly list Previews

Wobbly list - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wobbly list</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="sidebar"> <div class="pane"></div>
</div>
<div class="container"> <div class="items"> <div class="cell-gutter"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Wobbly list - Script Codes CSS Codes

html { margin: 0; width: 100%;
}
.sidebar { width: 50px; height: 100%; border-left: 2px solid black; position: fixed; right: 0; top: 0; bottom: 0; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; -webkit-transform: translateX(100%); transform: translateX(100%);
}
.sidebar.peak { -webkit-transform: translateX(0); transform: translateX(0);
}
.sidebar .pane { position: absolute; top: 0; border: 1px solid black; width: 100%;
}
.container { width: 100%; padding: 0 20px; box-sizing: border-box;
}
.items { width: 100%; -webkit-perspective: 500; perspective: 500;
}
.column-width { width: 30%;
}
.cell { position: relative; box-sizing: border-box; float: left; border: 2px solid black; width: 30%; margin-bottom: 40px; display: inline-block; vertical-align: top;
}
.cell:nth-child(1) { height: 622px; -webkit-transition: -webkit-transform 427ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 427ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 427ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 427ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 427ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(1) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(1) { /* transform: translateX(-50px); */
}
.cell:nth-child(2) { height: 577px; -webkit-transition: -webkit-transform 637ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 637ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 637ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 637ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 637ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(2) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(2) { /* transform: translateX(-50px); */
}
.cell:nth-child(3) { height: 551px; -webkit-transition: -webkit-transform 257ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 257ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 257ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 257ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 257ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(3) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(3) { /* transform: translateX(-50px); */
}
.cell:nth-child(4) { height: 241px; -webkit-transition: -webkit-transform 447ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 447ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 447ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 447ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 447ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(4) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(4) { /* transform: translateX(-50px); */
}
.cell:nth-child(5) { height: 318px; -webkit-transition: -webkit-transform 695ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 695ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 695ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 695ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 695ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(5) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(5) { /* transform: translateX(-50px); */
}
.cell:nth-child(6) { height: 360px; -webkit-transition: -webkit-transform 640ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 640ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 640ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 640ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 640ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(6) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(6) { /* transform: translateX(-50px); */
}
.cell:nth-child(7) { height: 513px; -webkit-transition: -webkit-transform 473ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 473ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 473ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 473ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 473ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(7) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(7) { /* transform: translateX(-50px); */
}
.cell:nth-child(8) { height: 474px; -webkit-transition: -webkit-transform 239ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 239ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 239ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 239ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 239ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(8) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(8) { /* transform: translateX(-50px); */
}
.cell:nth-child(9) { height: 462px; -webkit-transition: -webkit-transform 370ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 370ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 370ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 370ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 370ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(9) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(9) { /* transform: translateX(-50px); */
}
.cell:nth-child(10) { height: 269px; -webkit-transition: -webkit-transform 297ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 297ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 297ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 297ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 297ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(10) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(10) { /* transform: translateX(-50px); */
}
.cell:nth-child(11) { height: 635px; -webkit-transition: -webkit-transform 659ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 659ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 659ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 659ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 659ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(11) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(11) { /* transform: translateX(-50px); */
}
.cell:nth-child(12) { height: 273px; -webkit-transition: -webkit-transform 661ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 661ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 661ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 661ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 661ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(12) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(12) { /* transform: translateX(-50px); */
}
.cell:nth-child(13) { height: 221px; -webkit-transition: -webkit-transform 493ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 493ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 493ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 493ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 493ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(13) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(13) { /* transform: translateX(-50px); */
}
.cell:nth-child(14) { height: 267px; -webkit-transition: -webkit-transform 432ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 432ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 432ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 432ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 432ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(14) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(14) { /* transform: translateX(-50px); */
}
.cell:nth-child(15) { height: 697px; -webkit-transition: -webkit-transform 605ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 605ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 605ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 605ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 605ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(15) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(15) { /* transform: translateX(-50px); */
}
.cell:nth-child(16) { height: 432px; -webkit-transition: -webkit-transform 589ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 589ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 589ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 589ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 589ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(16) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(16) { /* transform: translateX(-50px); */
}
.cell:nth-child(17) { height: 420px; -webkit-transition: -webkit-transform 679ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 679ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 679ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 679ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 679ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(17) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(17) { /* transform: translateX(-50px); */
}
.cell:nth-child(18) { height: 211px; -webkit-transition: -webkit-transform 223ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 223ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 223ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 223ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 223ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(18) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(18) { /* transform: translateX(-50px); */
}
.cell:nth-child(19) { height: 695px; -webkit-transition: -webkit-transform 289ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 289ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 289ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 289ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 289ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(19) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(19) { /* transform: translateX(-50px); */
}
.cell:nth-child(20) { height: 284px; -webkit-transition: -webkit-transform 224ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 224ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 224ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 224ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 224ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(20) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(20) { /* transform: translateX(-50px); */
}
.cell:nth-child(21) { height: 472px; -webkit-transition: -webkit-transform 488ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 488ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 488ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 488ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 488ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(21) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(21) { /* transform: translateX(-50px); */
}
.cell:nth-child(22) { height: 692px; -webkit-transition: -webkit-transform 634ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 634ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 634ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 634ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 634ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(22) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(22) { /* transform: translateX(-50px); */
}
.cell:nth-child(23) { height: 475px; -webkit-transition: -webkit-transform 582ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 582ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 582ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 582ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 582ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(23) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(23) { /* transform: translateX(-50px); */
}
.cell:nth-child(24) { height: 395px; -webkit-transition: -webkit-transform 216ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 216ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 216ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 216ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 216ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(24) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(24) { /* transform: translateX(-50px); */
}
.cell:nth-child(25) { height: 511px; -webkit-transition: -webkit-transform 456ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 456ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 456ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 456ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 456ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(25) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(25) { /* transform: translateX(-50px); */
}
.cell:nth-child(26) { height: 559px; -webkit-transition: -webkit-transform 253ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 253ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 253ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 253ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 253ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(26) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(26) { /* transform: translateX(-50px); */
}
.cell:nth-child(27) { height: 577px; -webkit-transition: -webkit-transform 549ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 549ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 549ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 549ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 549ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(27) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(27) { /* transform: translateX(-50px); */
}
.cell:nth-child(28) { height: 220px; -webkit-transition: -webkit-transform 672ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 672ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 672ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 672ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 672ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(28) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(28) { /* transform: translateX(-50px); */
}
.cell:nth-child(29) { height: 312px; -webkit-transition: -webkit-transform 396ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 396ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 396ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 396ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 396ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(29) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(29) { /* transform: translateX(-50px); */
}
.cell:nth-child(30) { height: 240px; -webkit-transition: -webkit-transform 485ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 485ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 485ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 485ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 485ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(30) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(30) { /* transform: translateX(-50px); */
}
.cell:nth-child(31) { height: 663px; -webkit-transition: -webkit-transform 224ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 224ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 224ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 224ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 224ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(31) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(31) { /* transform: translateX(-50px); */
}
.cell:nth-child(32) { height: 443px; -webkit-transition: -webkit-transform 247ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 247ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 247ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 247ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 247ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(32) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(32) { /* transform: translateX(-50px); */
}
.cell:nth-child(33) { height: 641px; -webkit-transition: -webkit-transform 594ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 594ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 594ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 594ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 594ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(33) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(33) { /* transform: translateX(-50px); */
}
.cell:nth-child(34) { height: 456px; -webkit-transition: -webkit-transform 369ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 369ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 369ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 369ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 369ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(34) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(34) { /* transform: translateX(-50px); */
}
.cell:nth-child(35) { height: 365px; -webkit-transition: -webkit-transform 682ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 682ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 682ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 682ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 682ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(35) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(35) { /* transform: translateX(-50px); */
}
.cell:nth-child(36) { height: 667px; -webkit-transition: -webkit-transform 635ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 635ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 635ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 635ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 635ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(36) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(36) { /* transform: translateX(-50px); */
}
.cell:nth-child(37) { height: 585px; -webkit-transition: -webkit-transform 565ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 565ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 565ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 565ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 565ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(37) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(37) { /* transform: translateX(-50px); */
}
.cell:nth-child(38) { height: 377px; -webkit-transition: -webkit-transform 381ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 381ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 381ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 381ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 381ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(38) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(38) { /* transform: translateX(-50px); */
}
.cell:nth-child(39) { height: 317px; -webkit-transition: -webkit-transform 672ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 672ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 672ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 672ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 672ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(39) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(39) { /* transform: translateX(-50px); */
}
.cell:nth-child(40) { height: 630px; -webkit-transition: -webkit-transform 686ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 686ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 686ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 686ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 686ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(40) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(40) { /* transform: translateX(-50px); */
}
.cell:nth-child(41) { height: 549px; -webkit-transition: -webkit-transform 696ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 696ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 696ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 696ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 696ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(41) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(41) { /* transform: translateX(-50px); */
}
.cell:nth-child(42) { height: 584px; -webkit-transition: -webkit-transform 596ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 596ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 596ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 596ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 596ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(42) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(42) { /* transform: translateX(-50px); */
}
.cell:nth-child(43) { height: 386px; -webkit-transition: -webkit-transform 382ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 382ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 382ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 382ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 382ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(43) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(43) { /* transform: translateX(-50px); */
}
.cell:nth-child(44) { height: 494px; -webkit-transition: -webkit-transform 514ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 514ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 514ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 514ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 514ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(44) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(44) { /* transform: translateX(-50px); */
}
.cell:nth-child(45) { height: 393px; -webkit-transition: -webkit-transform 625ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 625ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 625ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 625ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 625ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(45) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(45) { /* transform: translateX(-50px); */
}
.cell:nth-child(46) { height: 217px; -webkit-transition: -webkit-transform 486ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 486ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 486ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 486ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 486ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(46) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(46) { /* transform: translateX(-50px); */
}
.cell:nth-child(47) { height: 323px; -webkit-transition: -webkit-transform 667ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 667ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 667ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 667ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 667ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(47) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(47) { /* transform: translateX(-50px); */
}
.cell:nth-child(48) { height: 628px; -webkit-transition: -webkit-transform 352ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 352ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 352ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 352ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 352ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(48) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(48) { /* transform: translateX(-50px); */
}
.cell:nth-child(49) { height: 678px; -webkit-transition: -webkit-transform 401ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 401ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 401ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 401ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 401ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(49) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(49) { /* transform: translateX(-50px); */
}
.cell:nth-child(50) { height: 339px; -webkit-transition: -webkit-transform 336ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 336ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 336ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 336ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 336ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(50) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(50) { /* transform: translateX(-50px); */
}
.cell:nth-child(51) { height: 585px; -webkit-transition: -webkit-transform 295ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 295ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 295ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 295ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 295ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateY(0); transform: translateY(0);
}
.cell.shift:nth-child(51) { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); transition: transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46), -webkit-transform 500ms cubic-bezier(0.46, -0.355, 0.54, 1.46); -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.cell.shift.reverse:nth-child(51) { /* transform: translateX(-50px); */
}
.cell-gutter { width: 5%;
}

Wobbly list - Script Codes JS Codes

'use strict';
var msnry = new Masonry(document.querySelector('.items'), { // optionsc itemSelector: '.cell', columnWidth: '.cell', gutter: '.cell-gutter', percentPosition: true });
var elems = document.querySelectorAll('.cell'), items = [];
for (var i = 0; i < elems.length; i++) { items.push(elems[i]);
}
var lastFrameScrollY = 0;
var viewportHeight = window.innerHeight, documentBoundingRect = document.body.getBoundingClientRect(), documentHeight = documentBoundingRect.height, ratio = viewportHeight / documentHeight, sidebarPaneHeight = viewportHeight * ratio, sidebar = document.querySelector('.sidebar'), sidebarPane = sidebar.querySelector('.pane');
sidebarPane.style.height = sidebarPaneHeight + 'px';
var update = function update() { sidebarPane.style.top = window.scrollY * ratio + 'px'; if (window.scrollY > lastFrameScrollY) { items.forEach(function (i) { i.classList.add('shift'); i.classList.remove('reverse'); sidebar.classList.add('peak'); }); } else if (window.scrollY < lastFrameScrollY) { items.forEach(function (i) { i.classList.add('shift'); i.classList.add('reverse'); sidebar.classList.add('peak'); }); } else { items.forEach(function (i) { i.classList.remove('shift'); i.classList.remove('shift-reverse'); sidebar.classList.remove('peak'); }); } lastFrameScrollY = window.scrollY; requestAnimationFrame(update);
};
update();

Home Page	Home
Developer	Ross B
Username	rocbear
Uploaded	January 05, 2023
Rating	3
Size	5,672 Kb
Views	8,096

Do you need developer help for Wobbly list?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ross B (rocbear) Script Codes

Name	Size
A Pen by Ross B	3,715 Kb
Hovergram	2,505 Kb
Context menu experiment	5,059 Kb
Spear checkboxes	3,682 Kb
Playful inner-page navigation	4,689 Kb
Liquid gold	6,470 Kb
Full page scroll-over with ScrollMagic	2,752 Kb
Babel React template	5,357 Kb
Responsive grid based FLIP.js demo	3,883 Kb
Torus light track	4,909 Kb

Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
CSS Letter animations	Sladix	2,116 Kb
Ripples in water	Nobitagit	2,704 Kb
Project_one	MOHIM	9,592 Kb
Fullscreen audio play button	72	2,148 Kb
ABVI Menu Discarded	Overdrivemachines	3,607 Kb
A Pen by Bryan	Brydave	2,286 Kb
Coburg Banks SVG Logo	Mjtweaver	3,875 Kb
Multi-step GSAP animation	Acacheung	2,668 Kb
Background-blend-mode Test	0x04	4,744 Kb
A Bouncy Menu Toggle	Billyysea	4,563 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!