Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Oct 22, 2019
Embed
What would you like to do?
Table with Entry Animation [1]
<table class="zigzag">
<thead>
<tr>
<th>Player</th>
<th>Goals</th>
<th>First</th>
<th>Latest</th>
</tr>
</thead>
<tbody>
<tr>
<td>Wayne Rooney</td>
<td>53</td>
<td>06 Sep 2003</td>
<td>27 Jun 2016</td>
</tr>
<tr>
<td>Bobby Charlton</td>
<td>49</td>
<td>19 Apr 1958</td>
<td>20 May 1970</td>
</tr>
<tr>
<td>Gary Lineker</td>
<td>48</td>
<td>26 Mar 1985</td>
<td>29 Apr 1992</td>
</tr>
<tr>
<td>Jimmy Greaves</td>
<td>44</td>
<td>17 May 1959</td>
<td>24 May 1967</td>
</tr>
<tr>
<td>Michael Owen </td>
<td>40</td>
<td>27 May 1998</td>
<td>12 Sep 2007</td>
</tr>
<tr>
<td>Alan Shearer</td>
<td>30</td>
<td>19 Feb 1992</td>
<td>20 Jun 2000</td>
</tr>
<tr>
<td>Tom Finney</td>
<td>30</td>
<td>28 Sep 1946</td>
<td>04 Oct 1958</td>
</tr>
<tr>
<td>Nat Lofthouse</td>
<td>30</td>
<td>22 Nov 1950</td>
<td>22 Oct 1958</td>
</tr>
<tr>
<td>Vivian Woodward</td>
<td>29</td>
<td>14 Feb 1903</td>
<td>13 Mar 1911</td>
</tr>
<tr>
<td>Frank Lampard</td>
<td>29</td>
<td>20 Aug 2003</td>
<td>29 May 2013</td>
</tr>
</tbody>
</table>
const rows = Array.from(document.querySelectorAll('tr'));
function slideOut(row) {
row.classList.add('slide-out');
}
function slideIn(row, index) {
setTimeout(function() {
row.classList.remove('slide-out');
}, (index + 5) * 200);
}
rows.forEach(slideOut);
rows.forEach(slideIn);
table {
overflow:hidden;
th, td {
padding:.25em .5em;
text-align:left;
vertical-align:top;
}
th {
background-color:#009;
color:#fff;
}
td {
background-color:#eee;
}
tr {
transition:all 1s ease-in-out;
&.slide-out {
transform:translateX(100%);
}
}
}

Table with Entry Animation [1]

Animating table rows into view, like we often see with TV graphics. This one slides in from the right.

A Pen by Chris Smith on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment