I've got a assignment where I need to create a 3x3 grid of rectangles, where a person can click one of those rectangles and the page zooms in on that rectangle, so it's now screen-filling.
I've got that working in Angular 6 by just using their animation system and doing transform: scale(3) and a translateX/translateY, depending on which one of the rectangles has been clicked. So, no problem there. (see the gif below)
However, I also need to create 2 or 3 rectangles, that are shown before the grid is shown. So, when the user visits the page, he first sees 1 rectangle, filling the screen, clicks on "next", and then sees the grid.
Basically, I want to have a "top-down" view of my DOM, being able to zoom one of the rectangles or zoom out and see the grid.
I was thinking about ditching the DOM and using three.js or pixi.js, but since I'm on a really tight deadline, I thought about coming here and asking you guru's what you think is best.
So, what's the best way to create a whole bunch of rectangles and be able to zoom in, out, and move around between them? Thanks a lot in advance!
Please, if you need more info, leave a comment :)
