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

What is Framer? Join the Community
Return to index
Youran You
Posted Oct 18 - Read on Facebook

Hey! Anyone knows how to prototype the app organization effect? You drag an icon and it pushes other icons along the way until you drop it. Thanks in advance :)

5 Comments

Vince Pataky

I'm also interested! It seems quite complex, are there any examples out there?

Benjamin Den Boer

Hiya Youran You, Vince Pataky — perhaps this simple example provides a useful base to start with: https://www.facebook.com/groups/framerjs/permalink/844931958967210/?match=aG92ZXJpbmcsZHJhZw%3D%3D

贺冻冻

很棒!

Trevor Coleman

In a general sense: create an array of "positions" (probably tiled transparent layers)

Then an array of "icons" where each index corresponds to a position, and contains an icon layer.

Then when you drag an icon, use array.splice(), to snip it out of the array.

When they array changes, trigger an animation to move the icons to the coordinates of their new positions.

If the midX/midY of the icon you are dragging is within the boundaries of a position, then insert a "blank" spot in the array of icons. This should trigger the animations and everything will sort itself out.

Read the entire post on Facebook