Design Sketch - Grid Animation
Try it out or look at the code.
The design sketch is called grid animation. The display is divided into 600 grid items, which have a small border. One grid item is colored in blue: The box. A user can move the box by using the arrow keys on his or her keyboard. In addition, on every move, a little sound is played.
What I learned
- The transitionend event listener. Never heard of this before but this eventListener comes in handy when a transition ends and you need for example remove a class from an element which you have programmatically added.
- data-. I didn’t use these data attributes in this app but they were essentiell in the app build by Wes Bros.
- How to add borders to a css grid. To add the borders I had to do a little workaround. I had to programmatically add 600 divs and apply a border to them. To my knowledge, there is no elegant solution to just color the borders of many grids.