Scrolling through a series of content items

• US 9,696,898 B2
• Filed: 11/14/2012
• Issued: 07/04/2017
• Est. Priority Date: 11/14/2012
• Status: Active Grant

• Current Assignee: Meta Platforms, Inc. (f/k/a Facebook, Inc.)
• Original Assignee: Meta Platforms, Inc. (f/k/a Facebook, Inc.)
• Inventors: Matas, Michael
• Primary Examiner(s): IPAKCHI, MARYAM M
• Application Number:
  US13/677,104
• Publication Number:
  US 20140137013A1
• Time in Patent Office: 1,693 Days
• Field of Search: None
• CPC Class Codes: G06F 3/0481 based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
• CPC Class Codes: G06F 3/0488 using a touch-screen or digitiser, e.g. input of commands through traced gestures
• CPC Class Codes: G06F 9/451 Execution arrangements for user interfaces

Abstract

In one embodiment, a method includes displaying one or more first content items on a screen of an electronic device, the first content items being part of a series of content items; and in response to a user input with respect to the first content items, displaying an animation sequence depicting one or more second content items replacing the first content items on the screen of the electronic device, the second content items being part of the series of content items; and displaying the second content items on the screen of the electronic device.

Claims

1. A computer-implemented method comprising:

displaying a background component on a screen of an electronic device, the background component comprising a first image;

displaying one or more first content items on the screen, the first content items being part of a series of content items, and the first content items overlaying at least a portion of the background component; and

in response to a user input to move the first content items in a first direction across the screen,

displaying a background animation sequence depicting a transition from the first image to a second image by displaying the first image fading out of the screen while the second image fades in;

displaying a content-item animation sequence depicting the first content items moving in the first direction off the screen while simultaneously depicting one or more second content items moving in the first direction onto the screen, wherein the second content items are part of the series of content items; and

displaying the second content items on the screen of the electronic device,

wherein each of the second content items moves by simulating an effect of being attached to a simulated spring,

wherein each simulated spring connects each second content item to a destination position on the screen, the destination position of each second content item being specific to that second content item,

wherein a first distance of a first space between a first content item of the second content items and a second content item of the second content items is different from a second distance of a second space between the second content item of the second content items and a third content item of the second content items while the second content items move in the first direction onto the screen to the destination position, the first distance decreasing before the second distance decreases, and

wherein the content-item animation sequence displays at least one second content item;

moving in the first direction a predetermined distance past a destination position associated with the at least one second content item, then

moving in a second direction back to the destination position, the second direction being opposite of the first direction,

wherein there are n of the first content items respectively displayed at n positions on the screen of the electronic device at the same time, and

wherein the content item animation sequence depicts n of the second content items moving onto the screen toward the n positions, respectively, and moving into the n positions on the screen of the electronic device and replacing the n first content items, each of the destination positions corresponding to one of the n positions.

2. The method of claim 1, wherein:

the screen of the electronic device is a touchscreen; and

the user input with respect to the first content items is a swipe across the n positions on the touchscreen.

3. The method of claim 1, wherein:

the n positions are arranged in a row across the screen of the electronic device; and

the content-item animation sequence depicts the n second content items moving in a row into the n positions.

4. The method of claim 3, wherein

the content-item animation sequence depicts the n second content items bouncing against each other while moving into the n positions on the screen of the electronic device.

5. The method of claim 1, wherein each of the one or more second content items comprises at least one content object, and wherein the at least one content object on at least one of the second content items is not shown until after displaying the content-item animation sequence.

6. The method of claim 1, the method further comprising:

arranging a plurality of components of a user interface in a hierarchy, the user interface comprising one or more content layers and each of the content layers comprising one or more of the components;

displaying the first image as the component of a first content layer; and

displaying the one or more first content items as the one or more components of a second content layer.

7. One or more computer-readable non-transitory storage media embodying software that is operable when executed to:

display a background component on a screen of an electronic device, the background component comprising a first image;

display one or more first content items on the screen, the first content items being part of a series of content items, and the first content items overlaying at least a portion of the background component; and

in response to a user input to move the first content items in a first direction across the screen,

display a background animation sequence depicting a transition from the first image to a second image by displaying the first image fading out of the screen while the second image fades in;

display a content-item animation sequence depicting the first content items moving in the first direction off the screen while simultaneously depicting one or more second content items moving in the first direction onto the screen, wherein the second content items are part of the series of content items; and

display the second content items on the screen of the electronic device,

wherein each of the second content items moves by simulating an effect of being attached to a simulated spring,

wherein each simulated spring connects each second content item to a destination position on the screen, the destination position of each second content item being specific to that second content item,

wherein a first distance of a first space between a first content item of the second content items and a second content item of the second content items is different from a second distance of a second space between the second content item of the second content items and a third content item of the second content items while the second content items move in the first direction onto the screen to the destination position, the first distance decreasing before the second distance decreases, and

wherein the content-item animation sequence displays at least one second content item;

moving in the first direction a predetermined distance past a destination position associated with the at least one second content item, then

moving in a second direction back to the destination position, the second direction being opposite of the first direction,

wherein there are n of the first content items respectively displayed at n positions on the screen of the electronic device at the same time, and

wherein the content item animation sequence depicts n of the second content items moving onto the screen toward the n positions, respectively, and moving into the n positions on the screen of the electronic device and replacing the n first content items, each of the destination positions corresponding to one of the n positions.

8. The media of claim 7, wherein:

the screen of the electronic device is a touchscreen; and

the user input with respect to the first content items is a swipe across the n positions on the touchscreen.

9. The media of claim 7, wherein:

the n positions are arranged in a row across the screen of the electronic device; and

the content-item animation sequence depicts the n second content items moving in a row into the n positions.

10. The media of claim 9, wherein:

the content-item animation sequence depicts the n second content items bouncing against each other while moving into the n positions on the screen of the electronic device.

11. 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 background component on a screen of an electronic device, the background component comprising a first image;

display one or more first content items on the screen, the first content items being part of a series of content items, and the first content items overlaying at least a portion of the background component; and

in response to a user input to move the first content items in a first direction across the screen,

display a background animation sequence depicting a transition from the first image to a second image by displaying the first image fading out of the screen while the second image fades in;

display a content-item animation sequence depicting the first content items moving in the first direction off the screen while simultaneously depicting one or more second content items moving in the first direction onto the screen, wherein the second content items are part of the series of content items; and

display the second content items on the screen of the electronic device,

wherein each of the second content items moves by simulating an effect of being attached to a simulated spring,

wherein each simulated spring connects each second content item to a destination position on the screen, the destination position of each second content item being specific to that second content item,

wherein a first distance of a first space between a first content item of the second content items and a second content item of the second content items is different from a second distance of a second space between the second content item of the second content items and a third content item of the second content items while the second content items move in the first direction onto the screen to the destination position, the first distance decreasing before the second distance decreases, and

wherein the content-item animation sequence displays at least one second content item;

moving in the first direction a predetermined distance past a destination position associated with the at least one second content item, then

moving in a second direction back to the destination position, the second direction being opposite of the first direction,

wherein there are n of the first content items respectively displayed at n positions on the screen of the electronic device at the same time, and

wherein the content item animation sequence depicts n of the second content items moving onto the screen toward the n positions, respectively, and moving into the n positions on the screen of the electronic device and replacing the n first content items, each of the destination positions corresponding to one of the n positions.

12. The system of claim 11, wherein

the screen of the electronic device is a touchscreen;

and

the user input with respect to the first content items is a swipe across the n positions on the touchscreen.

13. The system of claim 11, wherein

the n positions are arranged in a row across the screen of the electronic device;

and

the content-item animation sequence depicts the n second content items moving in a row into the n positions.

14. The system of claim 13, wherein

the content-item animation sequence depicts the n second content items bouncing against each other while moving into the n positions on the screen of the electronic device.