Method for displaying and animating sectioned content that retains fidelity across desktop and mobile devices

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.

What is claimed is: 
     
       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. The computer storage media of  claim 1 , wherein the corresponding adjustments to the CSS properties comprise a triggered animation independent from speed of the manipulation. 
     
     
       3. The computer storage media of  claim 1 , wherein the corresponding adjustments to the CSS properties comprise a scrubbed animation controlled by speed of the manipulation. 
     
     
       4. The computer storage media of  claim 1 , wherein the operations additionally comprise identifying an internal timeline for each section in the one or more articles. 
     
     
       5. The computer storage media of  claim 4 , wherein the operations additionally comprise initializing behaviors for each internal timeline when one of the one or more articles starts to enter the viewport. 
     
     
       6. The computer storage media of  claim 1 , wherein the operations additionally comprise:
 managing which of the one or more articles are loaded into memory; and 
 changing which of the one or more articles are loaded into memory as the viewport is manipulated. 
 
     
     
       7. The computer storage media of  claim 1 , wherein the operations additionally comprise initializing a behavior to the one or more articles as they are loaded into memory. 
     
     
       8. The computer storage media of  claim 4 , wherein each section of a particular article has a different behavior. 
     
     
       9. The computer storage media of  claim 6 , wherein the corresponding adjustments to the CSS properties comprise an adjustment to at least one of opacity, color, scaling or font of one of the content elements. 
     
     
       10. The computer storage media of  claim 9 , wherein the operations additionally comprise releasing cached resources for one of the one or more articles as it leaves the viewport. 
     
     
       11. The computer storage media of  claim 1 , wherein the operations additionally comprise:
 determining there is enough memory to keep one of the one or more articles in memory; and 
 keeping the article in memory off screen. 
 
     
     
       12. The computer storage media of  claim 1 , wherein the operations additionally comprise:
 determining there is not enough memory to keep one of the one or more articles in memory; and 
 removing the article from memory. 
 
     
     
       13. The computer storage media of  claim 1 , wherein the corresponding adjustments to the CSS properties comprise a translation of one of the content elements and a simultaneous adjustment to at least one of opacity, color, scaling or font of the content element. 
     
     
       14. The computer storage media of  claim 1 , wherein the corresponding adjustments comprise at least one adjustment to a CSS property of a class of the content elements. 
     
     
       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. 
 
     
     
       16. The computerized method of  claim 15 , further comprising releasing cached resources for each section as it leaves the viewport. 
     
     
       17. The computerized method of  claim 15 , wherein the corresponding adjustments to the style properties comprise a triggered animation independent from speed of the manipulation. 
     
     
       18. The computerized method of  claim 15 , wherein the corresponding adjustments to the style properties comprise a scrubbed animation controlled by speed of the manipulation. 
     
     
       19. The computerized method of  claim 15 , wherein the corresponding adjustments comprise at least one adjustment to a style property of a class of the content elements. 
     
     
       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.