Over the last week or so I have been obsessed with recreating the iOS cards / animations from the app store. I created this pen:
I feel like I have written quite a bit of code for what seems to be a simple animation and I feel like my code is quite brittle. So I would like challenge anyone who is up for it to try to recreate these cards using less code than me. Here are the requirements:
- Can use any front end framework, preferably React or JQuery
- Can use any animation library
- Display a list of cards. Each card will initially display a background image, title and subtitle.
- When the user clicks the card, it will ‘spring’ to the top of the page from its current position and enlarge. (bonus if you can go completely fullscreen on any size display).
- When an individual card is enlarged, the document body is not scrollable, only the card is scrollable if its height is larger than the height of the screen.
- Once any individual card has enlarged, fade content in below the background image and fade in a ‘close button’ which will close the card and return it to its original position.
- Enlarging any card will not effect the position of any elements in the list.
- When an individual card is enlarged, the list is not visible.
Bonus - Card Height in the list is easily adjustable and the background image will fill its container while preserving aspect ratio while its displayed in the list.
So what do you think? Any takers on this challenge?