This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Thomas Law
Posted Nov 29 - Read on Facebook

I'm tired of making pure animation prototypes, because it leaves tediously long codes. So this time I introduce you a bookshelf prototype, let just get back to interactive things.

Here's the link:
http://share.framerjs.com/t0fcyc592ajj/
Don't delete too much books at a time! Two or three is good.

I've kept the codes under 500 lines. I think this will be a helpful reference for beginners.

This prototype includes following features:
1. Long press a book to enter editing mode.
2. Switch between normal and editing mode.
3. Book selection and shows the number of selected books.
4. Delete multiple books.
5. Plays an animation when deleting books.
6. Rearrange books automatically after deletion.
7. Recalculate height and position of scroll component after deletion.

If you like it, please give me a like on Dribbble, thank you very much!
https://dribbble.com/shots/3116835-Bookshelf

5 Comments

Floris Verloop

C'mon man, now you're just showing off 😉. Killer work Thomas!

Benjamin Den Boer

Insanely cool!

Eddie Wieczorek

Great work!

Nicolai Oluf Hemdrup

:O cool!

Leon Kosters

Woa! That delete animation! Awesome!

Read the entire post on Facebook