Flexbox Grid Animation

Developer
Thomas Vaeth
Size
4,299 Kb
Views
24,288
  1. Flexbox Grid Animation Previews
  2. Flexbox Grid Animation HTML Codes
  3. Flexbox Grid Animation CSS Codes
  4. Flexbox Grid Animation JS Codes

How do I make an flexbox grid animation?

An extension of Steven Scaff's flex-grid mixin to include animations per row instead of animating the whole container at once using Wow.js.. What is a flexbox grid animation? How do you make a flexbox grid animation? This script and codes were developed by Thomas Vaeth on 21 October 2022, Friday.

Flexbox Grid Animation Previews
IQ Test

Flexbox Grid Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox Grid Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Poppins'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="grid"> <div class="flex-grid"> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #1</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #2</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #3</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #4</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #5</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #6</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #7</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #8</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #9</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #10</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #11</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #12</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #13</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #14</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #15</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #16</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #17</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #18</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #19</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #20</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #21</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #22</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #23</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #24</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #25</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #26</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #27</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #28</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #29</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #30</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #31</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #32</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #33</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #34</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #35</h1> </div> </article> <article class="flex-grid__card js-wow"> <div class="flex-grid__container"> <h1>Card #36</h1> </div> </article> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flexbox Grid Animation - Script Codes CSS Codes

/** * Base Variables */
/** * Base Settings/Overwrite Normalize */
*, *:before, *:after { box-sizing: border-box;
}
body { padding: 4em 1em; font-family: "Poppins", sans-serif; font-size: 100%; line-height: 1.6; background-color: #f9f9f9;
}
@media (min-width: 22em) { body { font-size: 102.5%; }
}
@media (min-width: 32em) { body { font-size: 105%; }
}
@media (min-width: 54em) { body { font-size: 107.5%; }
}
@media (min-width: 65em) { body { font-size: 110%; }
}
@media (min-width: 91em) { body { font-size: 115%; }
}
h1 { margin: 0;
}
/** * Extends */
.flex-grid__container { position: relative; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); background-clip: padding-box; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease;
}
.flex-grid__container:after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-clip: padding-box; box-shadow: 0 2px 50px rgba(0, 0, 0, 0.25); opacity: 0; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
}
.flex-grid__container:hover { -webkit-transform: translate3d(0, -0.5em, 0); transform: translate3d(0, -0.5em, 0); -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease;
}
.flex-grid__container:hover:after { opacity: 1;
}
/** * Components */
.grid { max-width: 81em; margin-right: auto; margin-left: auto;
}
@media (min-width: 54em) { .grid { width: 80%; }
}
@media (min-width: 91em) { .grid { width: 65%; }
}
.flex-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-flow: wrap; flex-flow: wrap; margin-left: -1em; margin-right: -1em;
}
.flex-grid > * { padding: 1em; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%;
}
@media (min-width: 32em) { .flex-grid > * { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; }
}
@media (min-width: 54em) { .flex-grid > * { -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; }
}
@media (min-width: 91em) { .flex-grid > * { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; }
}
.flex-grid > *:nth-child(1n + 1) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s;
}
@media (min-width: 32em) { .flex-grid > *:nth-child(2n + 1) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .flex-grid > *:nth-child(2n + 2) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
}
@media (min-width: 54em) { .flex-grid > *:nth-child(3n + 1) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .flex-grid > *:nth-child(3n + 2) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .flex-grid > *:nth-child(3n + 3) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
}
@media (min-width: 91em) { .flex-grid > *:nth-child(4n + 1) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .flex-grid > *:nth-child(4n + 2) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .flex-grid > *:nth-child(4n + 3) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .flex-grid > *:nth-child(4n + 4) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
}
.flex-grid__card { -webkit-animation-name: fade-in-up; animation-name: fade-in-up;
}
.flex-grid__container { padding: 2em; text-align: center; background-color: #fff;
}
/** * Animations */
@-webkit-keyframes fade-in-up { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes fade-in-up { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; }
}
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;
}

Flexbox Grid Animation - Script Codes JS Codes

var wow = new WOW({ boxClass: 'js-wow'
});
wow.init();
Flexbox Grid Animation - Script Codes
Flexbox Grid Animation - Script Codes
Home Page Home
Developer Thomas Vaeth
Username thomasvaeth
Uploaded October 21, 2022
Rating 3
Size 4,299 Kb
Views 24,288
Do you need developer help for Flexbox Grid Animation?

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!

Thomas Vaeth (thomasvaeth) Script Codes
Name
Recipe Book
Pokemon React
Wired Link Mixin
Local Weather
Image Loop on Hover
Pomodoro Clock
Personal Portfolio Webpage
Grey with Gum Sole
Button Border Slide Mixin
Flexbox Flex-Grow Mast
Create amazing love letters 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!