Scroll-based presentation of animation content
View Patent ↗An online system or an application of the online system generates and provides user interfaces that include user interface elements configured to allow users to browse newsfeed stories. For example, users can browse newsfeed stories via scrolling actions. The user interface elements are further configured to control presentation of individual stories that include series of images. The user's scrolling action causes the images to be presented sequentially. The online system selects a particular image and configures a speed of presenting the images according to the user action. The online system further generates and provides user interfaces that present still images in a parallax effect by adjusting viewpoints of observing the still images. The viewpoints can be adjusted according to the user action. The online system further configures the user interfaces to present related stories in adjacent positions and to present 360-degree videos as well as panorama images.
1. A method comprising:
receiving, from an online system by a client device including a display area, a feed of media content items, wherein a media content item of the feed of media content items is an animated content item that includes an ordered set of images illustrating moving visual content;
displaying, by the client device, a subset of media content items of the feed of media content items in the display area;
receiving, at the client device, a user input signal to scroll the feed of media content items;
in response to the user input signal:
scrolling the feed on the display area of the client device, wherein a different subset of media content items of the feed of media content items is displayed in the display area and the different subset of media content items includes the animated content item;
playing the animated media content item by:
determining a position of the section on the display area,
calculating a scrolling speed,
calculating an amount of time for displaying the section on the display area based on the position of the section on the display area and the scrolling speed,
determining a maximum number of images for display based on the calculated amount of time, and
responsive to determining the scrolling speed exceeds a threshold speed and the ordered set of images exceeds the maximum number of images, selecting a subset of the ordered set of images to play based on the position of the section, the scrolling speed, and the maximum number of images; and
updating the subset of the media content items displayed in the display area and the selection of the subset of the ordered set of images to be played as the scrolling progresses.
2. The method of claim 1 , wherein each image of the subset of the ordered set of images is displayed for at least a threshold amount of time.
3. The method of claim 1 , wherein selecting the subset of the ordered set of images comprises:
calculating the scrolling speed; and
determining an amount of time for displaying each image of the subset of the ordered set of images based on the scrolling speed,
wherein each image is displayed for the amount of time.
4. The method of claim 1 , wherein the ordered set of images includes one image, and wherein selecting the subset of the ordered set of images comprises:
comparing the position of the section to position ranges; and
responsive to determining the position of the section is within a position range, modifying the subset of the ordered set of images according to a viewpoint corresponding to the position range,
wherein the modified subset of the ordered set of images is displayed in the display area.
5. The method of claim 1 , wherein the feed of media content items includes a second media content item including a second ordered set of images illustrating second moving visual content, further comprising:
in response to the user input signal:
updating the subset of media content items to include the second media content item including the second ordered set of images; and
displaying the second media content item in a second section configured to present media content, the second section adjacent to the first section on the display area.
6. The method of claim 5 , wherein each of the media content items is an organic media content item generated by the online system or a sponsored media content item received from a third party system, the first media content item and the second media content item are sponsored media content items, and the first section and the second section are separated by one or more sections displaying organic media content items.
7. The method of claim 1 , wherein the subset of media content items includes a 360-degree video or a panorama image, further comprising:
receiving a second user input signal to view the 360-degree video or the panorama image;
in response to the second user input signal: presenting the 360-degree video or the panorama image.
8. The method of claim 1 , wherein the media content item is of a format further comprising:
receiving, by the online system, a series of images or a video including a series of video frames; and
processing the series of images or the video into the ordered set of images.
9. A computer program product comprising a non-transitory computer readable storage medium having instructions encoded thereon that, when executed by a processor, cause the processor to:
update, from an online system by a client device including a display area, a feed of media content items, wherein a media content item of the feed of media content items is an animated content item that includes an ordered set of images illustrating moving visual content;
display, by the client device, a subset of media content items of the feed of media content items in the display area;
receive, at the client device, a user input signal to scroll the feed of media content items;
in response to the user input signal:
scroll the feed on the display area of the client device, wherein a different subset of media content items of the feed of media content items is displayed in the display area and the different subset of media content items includes the animated content item;
play the animated media content item by:
determining a position of the section on the display area,
calculating a scrolling speed,
calculating an amount of time for displaying the section on the display area based on the position of the section on the display area and the scrolling speed,
determining a maximum number of images for display based on the calculated amount of time, and
responsive to determining the scrolling speed exceeds a threshold speed and the ordered set of images exceeds the maximum number of images, selecting a subset of the ordered set of images to play based at least on the position of the section, the scrolling speed, and the maximum number of images; and
update the subset of the media content items displayed in the display area and the selection of the subset of the ordered set of images to be played as the scrolling progresses.
10. The computer program product of claim 9 , wherein the instructions are configured to cause the processor to display each image of the subset of the ordered set of images for at least a threshold amount of time.
11. The computer program product of claim 9 , wherein the instructions configured to cause the processor to select the subset of the ordered set of images are further configured to cause the processor to:
calculate the scrolling speed; and
determine an amount of time for displaying each image of the subset of the ordered set of images based on the scrolling speed,
wherein each image is displayed for the amount of time.
12. The computer program product of claim 9 , wherein the ordered set of images includes one image, and wherein the instructions configured to cause the processor to select the subset of the ordered set of images are further configured to cause the processor to:
compare the position of the section to position ranges; and
responsive to determining the position of the section is within a position range, modify the subset of the ordered set of images according to a viewpoint corresponding to the position range,
wherein the modified subset of the ordered set of images is displayed in the display area.
13. The computer program product of claim 9 , wherein the feed of media content items includes a second media content item including a second ordered set of images illustrating second moving visual content, wherein the instructions are configured to cause the processor to:
in response to the user input signal:
update the subset of media content items to include the second media content item including the second ordered set of images; and
display the second media content item in a second section configured to present media content, the second section adjacent to the first section on the display area.
14. The computer program product of claim 13 , wherein each of the media content items is an organic media content item generated by the online system or a sponsored media content item received from a third party system, the first media content item and the second media content item are sponsored media content items, and the first section and the second section are separated by one or more sections displaying organic media content items.
15. The computer program product of claim 9 , wherein the subset of media content items includes a 360-degree video or a panorama image, wherein the instructions are configured to cause the processor to:
receive a second user input signal to view the 360-degree video or the panorama image;
in response to the second user input signal: present the 360-degree video or the panorama image.
16. A system comprising:
a processor; and
memory storing instructions configured to cause the processor to:
receive, from an online system by a client device including a display area, a feed of media content items, wherein a media content item of the feed of media content items is an animated content item that includes an ordered set of images illustrating moving visual content;
display, by the client device, a subset of media content items of the feed of media content items in the display area;
receive, at the client device, a user input signal to scroll the feed of media content items;
in response to the user input signal:
scroll the feed on the display area of the client device, wherein a different subset of media content items of the feed of media content items is displayed in the display area and the different subset of media content items includes the animated content item;
play the animated media content item by:
determining a position of the section on the display area,
calculating a scrolling speed,
calculating an amount of time for displaying the section on the display area based on the position of the section on the display area and the scrolling speed,
determining a maximum number of images for display based on the calculated amount of time, and
responsive to determining the scrolling speed exceeds a threshold speed and the ordered set of images exceeds the maximum number of images, selecting a subset of the ordered set of images to play based on the position of the section, the scrolling speed, and the maximum number of images; and
update the subset of the media content items displayed in the display area and the selection of the subset of the ordered set of images to be played as the scrolling progresses.