Animation sequence associated with content item
In one embodiment, a method includes displaying a first content item on a screen of a computing device, the first content item occupying the entire screen and comprising an icon representing a second content item; and in response to a first user input, displaying a first animation sequence depicting the icon opening up to reveal the second content item, the second content item eventually replacing the first content item and occupying the entire screen. Then, in response to a second user input, the method further includes displaying a second animation sequence depicting the second content item closing down and returning to the icon included in the first content item, the second content item eventually disappearing from the screen.
1. A method comprising, by a client device:
displaying a user-interface component on a screen of the client device in an on-page mode that partially fills the screen, the user-interface component representing a content item, wherein the user-interface component is displayed as a folded piece of paper with an image on an outside of the folded piece of paper, the image providing a visual description of the information within the content item;
receiving, at the client device, a first user input on the user-interface component, wherein the first user input is applied at a first speed;
in response to the first user input on the user-interface component, displaying a first animation sequence depicting the user-interface component unfolding the folded piece of paper at a speed that is based on the first speed of the first user input such that the image on the outside of the folded piece of paper disappears as the folded piece of paper completely unfolds to reveal the content item in a full-screen mode that entirely fills the screen to allow a user to consume and interact with the content item;
receiving, at the client device, a second user input on the content item, wherein the second user input is applied at a second speed; and
in response to the second user input on the content item, displaying a second animation sequence depicting the content item closing by folding the user-interface component displayed as an unfolded piece of paper at a speed that is based on the second speed of the second user input such that the content item disappears from the screen and the image on the outside of the folded piece of paper reappears to return the user-interface component being displayed in the on-page mode that partially fills the screen.
2. The method of claim 1 , wherein the first user input results from an upward swipe gesture made by the user.
3. The method of claim 1 , wherein the second user input results from a downward swipe gesture made by the user.
4. The method of claim 1 , further comprising:
enabling the user to scroll through, share, save, unsubscribe, or report the content item.
5. The method of claim 1 , wherein:
the user-interface component is associated with content from an online social network;
the content item is a web page; and
the icon is an image.
6. The method of claim 1 , wherein:
the user-interface component and the content item are part of a hierarchical user interface having a plurality of layers;
the user-interface component is displayed in a first layer of the hierarchical user interface; and
the content item is displayed in a second layer of the hierarchical user interface above the first layer.
7. The method of claim 6 , wherein, during the first animation sequence, the display of the user-interface component is dimmed while the display of the content item is highlighted.
8. The method of claim 7 , wherein the display of the user-interface component is further dimmed until the user-interface component disappears out of sight after being replaced by the content item.
9. The method of claim 6 , wherein, during the second animation sequence, the display of the user-interface component is gradually highlighted until the content item disappears from the screen after the second animation sequence.
10. The method of claim 9 , wherein the display of the content item is further dimmed until the content item disappears from the screen after the second animation sequence.
11. One or more computer-readable non-transitory storage media embodying software that is operable when executed to:
display a user-interface component on a screen of a client device in an on-page mode that partially fills the screen, the user-interface component representing a content item, wherein the user-interface component is displayed as a folded piece of paper with an image on an outside of the folded piece of paper, the image providing a visual description of the information within the content item;
receive, at the client device, a first user input on the user-interface component, wherein the first user input is applied at a first speed;
in response to the first user input on the user-interface component, display a first animation sequence depicting the user-interface component unfolding the folded piece of paper at a speed that is based on the first speed of the first user input such that the image on the outside of the folded piece of paper disappears as the folded piece of paper completely unfolds to reveal the content item in a full-screen mode that entirely fills the screen to allow a user to consume and interact with the content item;
receive, at the client device, a second user input on the content item, wherein the second user input is applied at a second speed; and
in response to the second user input on the content item, display a second animation sequence depicting the content item closing by folding the user-interface component displayed as an unfolded piece of paper at a speed that is based on the second speed of the second user input such that the content item disappears from the screen and the image on the outside of the folded piece of paper reappears to return the user-interface component being displayed in the on-page mode that partially fills the screen.
12. The media of claim 11 , wherein the first user input results from an upward swipe gesture made by the user.
13. The media of claim 11 , wherein the second user input results from a downward swipe gesture made by the user.
14. The media of claim 11 , wherein the software is further operable when executed to
enable the user to scroll through, share, save, unsubscribe, or report the content item.
15. The media of claim 11 , wherein:
the user-interface component is associated with content from an online social network;
the content item is a web page; and
the icon is an image.
16. The media of claim 11 , wherein:
the user-interface component and the content item are part of a hierarchical user interface having a plurality of layers;
the user-interface component is displayed in a first layer of the hierarchical user interface; and
the content item is displayed in a second layer of the hierarchical user interface above the first layer.
17. The media of claim 16 , wherein, during the first animation sequence, the display of the user-interface component is dimmed while the display of the content item is highlighted.
18. The media of claim 17 , wherein the display of the user-interface component is further dimmed until the user-interface component disappears out of sight after being replaced by the content item.
19. The media of claim 16 , wherein, during the second animation sequence, the display of the user-interface component is gradually highlighted until the content item disappears from the screen after the second animation sequence, and wherein the display of the content item is further dimmed until the content item disappears from the screen after the second animation sequence.
20. A system comprising: one or more processors; and a memory coupled to the processors comprising instructions executable by the processors, the processors operable when executing the instructions to:
display a user-interface component on a screen of a client device in an on-page mode where the user-interface component is included in another user-interface component and displayed as a part of the another user-interface component, wherein the display of the user-interface component partially fills the screen, the user-interface component representing a content item, wherein the user-interface component is displayed as a folded piece of paper with an image on an outside of the folded piece of paper the image providing a visual description of the information within the content item;
receive, at the client device, a first user input on the user-interface component, wherein the first user input is applied at a first speed;
in response to the first user input on the user-interface component, display a first animation sequence depicting the user-interface component unfolding the folded piece of paper at a speed that is based on the first speed of the first user input such that the image on the outside of the folded piece of paper disappears as the folded piece of paper completely unfolds to reveal the content item in a full-screen mode that entirely fills the screen to allow a user to consume and interact with the content item;
receive, at the client device, a second user input on the content item, wherein the second user input is applied at a second speed; and
in response to the second user input on the content item, display a second animation sequence depicting the content item closing by folding the user-interface component displayed as an unfolded piece of paper at a speed that is based on the second speed of the second user input such that the content item disappears from the screen and the image on the outside of the folded piece of paper reappears to return the user-interface component being displayed in the on-page mode that partially fills the screen.
21. The method of claim 1 , wherein:
the first user input is a first swiping gesture at the first speed; and
the second user input is a second swiping gesture at the second speed.