This concept showcases an enhancement to folders on the SpringBoard to allow the user to switch folders without having to leave the folder at all. To move to the next folder (left or right), simply drag over and the content in the next folder over will come in; similar to how you switch pages on the SpringBoard. The user can move as many folders as he or she wishes by continuing to drag after the folder ahead of it in the queue is fully loaded (again, like how SpringBoard manages paging).
I broke down the fullscreen image into six sections to document how the implementation works.
1) The folder you’re switching from and its label
As you switch to the next folder, the following things happen. The folder itself with its respective icons begin to fade out to match the opacity of the rest of the icons on the SpringBoard. Since the label for the folder that is being switched from is gone when in the folder is open, that label begins to fade in to the level that the rest of the labels are. In this case, the folder “Misc” is fading down while its label is fading in.
2) The folder you’re switching to and its label
This works in the exact opposite of the above. The folder you’re switching to fades into to full view while the label fades out until it is hidden. In this case, the folder “Apple” is fading in while its label is fading out.
3) The dialog arrow on the folder
The arrow plays a key role animation-wise to distinguish that you’re switching folders. As you begin to move one direction, the arrow follows along along the horizontal axis attached with the top of the folder. As soon as it reaches the next folder, it stops. Like the SpringBoard, if you don’t page far enough and let go, it will go back to its original position. If you scroll far enough and let go, it will continue on its own until it hits the next folder.
4) Folder label of the folder that’s coming in and the previous folder’s label
When switching folders to the right (as depicted), the folder you’re leaving starts heading off to the left. The icons head out and the label follows them as well. In the case of this example, the label is already gone because it is on the far left side when displayed normally. If you switch the opposite direction (not depicted), then the label stays shown as you move into the next folder until the new folder takes view. As soon as the other folder is loaded, the previous label is already off screen and out of view.
The incoming folder works the same way. The label follows the icons in and how the label is viewed depends on the number of icons in the incoming folder and which direction you’re coming from.
5) Incoming folder icons
Briefly mentioned above, the icons come in from whichever direction you’re switching. The incoming icons push the previous icons out and don’t fade or perform any animation. Think SpringBoard paging.
6) The folder canvas and other SpringBoard icons
Because the folder canvas changes size based on the number of icons in the folder, the canvas will change size dynamically as you move into the next folder if applicable. That means it will grow larger or shrink smaller as you move into the next folder.
Since the SpringBoard icons (the low opacity icons) change layout based on the size of the canvas, they will move down or up depending on whether the canvas is getting smaller or larger. It will follow in suit to whatever the canvas does. In this case, you can barely see a row of icons poking off the bottom of the screen. When this animation finished, that third row of icons will be visible with the folder “Apple” displayed.
Here are some answers to a few possible questions that you guys might have.
Does this functionality conflict with the native folder handling?
No it doesn’t not. It’s an enhancement. You can still leave folders and go to the SpringBoard or another folder if you wish to that way.
How does this implementation handle switching when the next folder is on another page?
If you switch to to another page, it will simply jump to the next folder and keep the same animation style (which includes the dialog arrow moving into position if applicable)
Will this implementation work on all iOS devices?
Yes it will. Although depicted on the iPhone, the folder-switching capability will be usable on the iPad and iPod touch.
Any further questions can be posed to me on Twitter or in the comments below.
© 2012 Joshua Tucker
