Responsively crop copy, restore onclick via typed animation

Responsively crop content copy down to a user-defined number of lines.
Click to restore content via a typed animation.

Vanilla JavaScript running at 60fps.
1K approx minified & gzipped.

UPDATED: Please take a loook at the smooth drop-down version: Responsively crop copy, restore onclick via sliding drop-down animation

GitHub repo: crop-copy-restore

Single line crop

My wife Maria, loves hot spicy food. I found this out on our first date. She said “I really fancy a curry”. Well, I was keen to impress so I said, “great, that’s my favourite too ”But it isn’t, never has been. We’ve been married 15 years and I still haven’t let on. Don’t know why. But whenever I cook her favourite chicken gujarati extra spicy, with green beans and fresh ginger, I do what any self-respecting chef would do. I cheat. I put a king size spoonful of natural yoghurt in mine. And I keep schtum.

Three lines

Sometimes, it's the undemandingly easy, everyday, recipes that deliver the most joy. For 'Iain' and his dad, from our Food Love Story, it's croque monsieur – they first had it on a joint trip to France, and since then it's become their favourite weekend lunch. Iain's made a few changes to it along the way (bonjour, wafer thin roast turkey) – but for him and his dad, it's most definitely 'proper'.

Two lines

Any parent will probably be able to relate to 'Sunita' in our Food Love Story. Kids can be champion fussy eaters, especially when it comes to vegetables. Here's a genius solution – meatballs packed with under-the-radar veg. Sunita's kids love them, and are none the wiser.


Considered too jarring visually.
Project to be redeveloped with smooth text expansion.

Pens by Mike FoskettwebSemantics