Method for displaying and animating sectioned content that retains fidelity across desktop and mobile devices
First Claim
1. A non-transitory computer storage media storing computer-useable instructions that, when used by one or more computing devices, cause the one or more computing devices to perform operations comprising:
- receiving a request from a user device for a document comprising one or more articles, the request causing at least a portion of the document to be loaded into a viewport;
receiving a manipulation to the document, the manipulation being associated with a distance in pixels the manipulation traveled;
accessing an animation timeline mapping the distance to a time duration in the animation timeline, wherein the animation timeline defines adjustments over time to CSS properties of content elements of a first of the one or more articles, wherein the time duration spans from a first point with a first set of values of the CSS properties to a second point with a second set of values of the CSS properties, wherein at least one of the first point or the second point is between a start point and an end point of the animation timeline; and
triggering, by the animation timeline, corresponding ones of the adjustments to update the CSS properties from the first set of values to the second set of values in the viewport during the manipulation.
2 Assignments
0 Petitions
Accused Products
Abstract
Embodiments of the present invention facilitate displaying and animating sectioned content that retains fidelity across desktop and mobile devices. An animation timeline is identified for an article comprising one or more sections. The animation timeline enables the article to appear to a user as a webpage. When a user manipulates the viewport, the animation timeline manages content movement in and out of the viewport. For articles comprising more than one section, an internal timeline may be created for each section and initialized when each article starts to enter the viewport. As articles are loaded into memory, they become visible in the viewport and behaviors may be attached to each section. In this way, memory is preserved and the document can be rendered in full fidelity across any device.
-
Citations
20 Claims
-
1. A non-transitory computer storage media storing computer-useable instructions that, when used by one or more computing devices, cause the one or more computing devices to perform operations comprising:
-
receiving a request from a user device for a document comprising one or more articles, the request causing at least a portion of the document to be loaded into a viewport; receiving a manipulation to the document, the manipulation being associated with a distance in pixels the manipulation traveled; accessing an animation timeline mapping the distance to a time duration in the animation timeline, wherein the animation timeline defines adjustments over time to CSS properties of content elements of a first of the one or more articles, wherein the time duration spans from a first point with a first set of values of the CSS properties to a second point with a second set of values of the CSS properties, wherein at least one of the first point or the second point is between a start point and an end point of the animation timeline; and triggering, by the animation timeline, corresponding ones of the adjustments to update the CSS properties from the first set of values to the second set of values in the viewport during the manipulation. - View Dependent Claims (2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14)
-
-
15. A computerized method for displaying and animating sectioned content, the computerized method comprising:
-
accessing an animation timeline for an article, the article comprising one or more sections; rendering at least a portion of the article, via a viewport; identifying each section in the article; initializing an internal timeline for one of the sections of the article that is loaded into memory, wherein the internal timeline defines adjustments over time to style properties of content elements of the section; receiving a manipulation to the article, the manipulation being associated with a distance in pixels the manipulation traveled; mapping the distance to a time duration in the internal timeline, wherein the internal timeline defines adjustments over time to the style properties of the one of the sections of the article, wherein the time duration spans from a first point with a first set of values of the style properties to a second point with a second set of values of the style properties, wherein at least one of the first point or the second point is between a start point and an end point of the internal timeline; and for all of the content elements in the viewport, animating movement of the content elements by triggering, by the internal timeline, corresponding ones of the adjustments to update the style properties from the first set of values to the second set of values in the viewport during the manipulation. - View Dependent Claims (16, 17, 18, 19)
-
-
20. A computerized system comprising:
-
one or more processors; and a non-transitory computer storage media storing computer-useable instructions that, when used by the one or more processors, cause the one or more processors to; access an animation timeline for an article, the article comprising one or more sections, wherein the animation timeline includes an internal timeline for each section within the document; receive a manipulation to the article, the manipulation being associated with a distance in pixels the manipulation traveled; map the distance to a time duration in the animation timeline, wherein the animation timeline defines adjustments over time to style properties of content elements of a first of the one or more articles, wherein the time duration spans from a first point with a first set of values of the style properties to a second point with a second set of values of the style properties, wherein at least one of the first point or the second point is between a start point and an end point of the animation timeline; and cause the animation timeline to animate the content elements in the viewport by scrubbing the time duration of the animation timeline to control trigger corresponding ones of the adjustments in the viewport during the manipulation, wherein the corresponding adjustments comprise a beginning and an end, wherein the beginning corresponds to the first set of values and the end corresponds to the second set of values.
-
Specification