Content animation customization based on viewport position

Abstract

Systems, methods, and computer-readable storage media for configuring an animated content item based on the position of the animated content item within a viewport of a computing device on which the animated content item is presented. A method includes providing an animation configuration interface to a first computing device, the animation configuration interface being configured to allow selection of position-dependent settings including a position within the viewport at which an attribute of the animated content item changes. The method further includes: receiving, by a second computing device, the position-dependent settings and configuring an attribute of the animated content item based on the position-dependent settings such that the animated content item is configured to change the attribute at a position within the viewport according to the position-dependent settings when presented within the viewport of the second computing device.

Description

Technical Field

[0001] The present disclosure relates to a method, a system, and a computer-readable storage medium for configuring animated content items. Background Art

[0002] In a computer networked environment such as the Internet, entities such as people or companies provide content items for public display in different forms to attract consumers. The entity providing the content item may desire to configure the presentation of the content item. Summary of the Invention

[0003] Some embodiments relate to a method for configuring an animated content item. The method includes configuring the animated content item based on the position of the animated content item within a viewport of a computing device on which the animated content is presented. The method includes providing an animation configuration interface to a first computing device, the animation configuration interface being configured to allow selection of a location-dependent setting including a position within the viewport at which an attribute of the animated content item changes via the first computing device. Additionally, the method includes: receiving, by a second computing device, the location-dependent setting and configuring an attribute of the animated content item based on the location-dependent setting such that the animated content item is configured to change an attribute at a position within the viewport according to the location-dependent setting when presented within the viewport of the second computing device.

[0004] In some embodiments, the location-dependent setting includes a position within the viewport at which an animation of the animated content item begins. The animation configuration interface is configured to allow selection of a second location-dependent setting. The second location-dependent setting includes a second position within the viewport at which the animation ends. Configuring the attribute of the animated content item includes causing the animation of the animated content item to change when the animated content item moves through the viewport between the position and the second position. The animation configuration interface is configured to allow selection of a third location-dependent setting including a third position within the viewport.

[0005] In some embodiments, providing the animation configuration interface includes causing the animation configuration interface to allow selection of the location-dependent setting via the first computing device by at least one of a sliding interface or a percentage input. The animation configuration interface includes a graphical representation of the position of the animated content item within the viewport, the graphical representation being movable to select a position within the viewport at which an attribute of the animated content item changes. The attribute includes the rotation of the animated content item. The location-dependent setting includes a position within the viewport at which the rotation of the animated content item begins. The animation configuration interface is configured to allow selection of a second position within the viewport at which the rotation of the animated content item ends.

[0006] In some embodiments, the animated content item includes an image animation or a video animation.

[0007] In some embodiments, the method further includes receiving, by a third computing device, location-dependent settings and configuring an attribute of the animated content item based on the location-dependent settings such that the animated content item is configured to change an attribute at a location of the viewport according to the location-dependent settings when presented within the viewport of the third computing device.

[0008] In some embodiments, the method further includes: determining a location of the animated content item relative to a viewport of a second computing device, determining that the location of the animated content item relative to the viewport matches the location of the viewport according to the location-dependent settings, and changing an attribute of the animated content item.

[0009] In some embodiments, the attribute includes a value interpolated based on a location of the animated content item within the viewport.

[0010] Some embodiments relate to a system having at least one computing device operatively coupled to at least one memory. The computing device may be configured to provide an animation configuration interface to a first computing device, the animation configuration interface being configured to allow selection of location-dependent settings including a location within a viewport at which an attribute of an animated content item changes via the first computing device. Additionally, the computing device may be configured to receive the location-dependent settings from the first computing device and provide the location-dependent settings to a second computing device, wherein the second computing device configures an attribute of the animated content item based on the location-dependent settings such that the animated content item is configured to change an attribute at a location of the viewport according to the location-dependent settings when presented within the viewport of the second computing device.

[0011] In some embodiments, the animation configuration interface is configured to allow selection of a second location-dependent setting. The animation configuration interface is configured to allow selection of a third location-dependent setting. The animated content item includes an image animation or a video animation.

[0012] Some embodiments relate to one or more computer-readable storage media storing instructions that, when executed by at least one processor, cause the at least one processor to perform operations including: receiving, by a first computing device, an animation configuration interface from a content management system, the animation configuration interface being configured to allow selection of location-dependent settings including a location within a viewport at which an attribute of an animated content item changes. Additionally, the operations include receiving, by a second computing device, the location-dependent settings and configuring an attribute of the animated content item based on the location-dependent settings such that the animated content item is configured to change an attribute at a location within the viewport in accordance with the location-dependent settings when presented within the viewport of the second computing device.

[0013] In some embodiments, configuring the location-dependent settings is further configured to allow selection of multiple attributes associated with the location-dependent settings including a location within a viewport at which multiple attributes of an animated content item change.

[0014] In some embodiments, the first computing device is configured to select a second location-dependent setting including a second location within the viewport, select a third location-dependent setting including a third location within the viewport, and select a fourth location-dependent setting including a partial location within the viewport.

[0015] Optional features related to the systems and methods described above and below may be combined in any suitable manner and may also be combined with system embodiments or computer-readable storage medium embodiments. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] The accompanying drawings are not intended to be drawn to scale. Like reference numerals and names in the various drawings indicate like elements. For purposes of clarity, not every component in each drawing may be labeled.

[0017] In the drawings:

[0018] Figure 1A is a block diagram depicting an embodiment of a system for providing information via a network in accordance with an illustrative embodiment;

[0019] Figure 1B is a block diagram depicting an embodiment of a content management system in accordance with an illustrative embodiment;

[0020] Figure 2 is a flowchart of a method for configuring an animated content item in accordance with an illustrative embodiment;

[0021] Figure 3 is an illustration of an example embodiment of an animation configuration interface in accordance with an illustrative embodiment;

[0022] Figure 4 Illustrates an example implementation of an animation timing panel within an animation configuration interface according to an illustrative implementation;

[0023] Figure 5 Illustrates an example implementation of an animation timing panel within an animation configuration interface according to an illustrative implementation;

[0024] Figure 6 Illustrates an example implementation of an animation timing panel within an animation configuration interface according to an illustrative implementation;

[0025] Figure 7 Illustrates an example implementation of an animation timing panel within an animation configuration interface according to an illustrative implementation;

[0026] Figure 8 Illustrates an example implementation of an animation timing panel within an animation configuration interface according to an illustrative implementation;

[0027] Figure 9 Is a block diagram illustrating an example computing device suitable for use in various embodiments described herein according to an illustrative implementation.

[0028] It will be recognized that, for purposes of illustration, some or all of the figures are schematic representations. The figures are provided for the purpose of illustrating one or more embodiments, with the express understanding that the figures will not be used to limit the scope or meaning of the claims. Detailed Description

[0029] Generally referring to the figures, systems and methods generally relate to configuring animated content items based on the position of an animated content item within a viewport of a computing device on which the animated content item is presented. In some embodiments, causal configuration of an animated content item can include configuring position-dependent settings including a position within the viewport at which an attribute of the animated content item changes. The position within the viewport can further include a position at which an attribute of the animated content item begins, a second position at which the animated content item ends, and a third position.

[0030] In many systems, when a computing device receives a scroll event and after an animated content item reaches the viewport, the animated content item begins to be presented within the viewport. However, the ability to control aspects of the animation based on the location within the viewport - such as when the animated content item does not begin to be presented within the viewport until it is fully within the viewport, reaches a certain point within the viewport, or is directly in the middle of the device's viewport by delaying the presentation of the animated content item - provides enhanced flexibility to the producer of the animated content item on how to present the animated content item within the viewport of the computing device. This causal approach allows the producer of the animated content item to produce a significant improvement in the engagement and noticeability of the animated content item when the animated content item is presented through the viewport of the computing device. Accordingly, aspects of the present disclosure address problems in application development by providing improved development tools for the production of animated content items.

[0031] Accordingly, the present disclosure is directed to systems and methods for configuring an animated content item based on the location of the animated content item within the viewport of a computing device on which the animated content item is presented. That is, the property that changes when the animated content item reaches that location can be the start of the animation. In some embodiments, the described systems and methods involve utilizing an animation configuration interface. The animation configuration interface allows the selection of location-dependent settings by utilizing a graphical representation of the location of the animated content item within the viewport that can be moved to select a location within the viewport at which the property of the animated content item changes. This can also be achieved by adjusting a sliding interface or by directly entering a value into a corresponding percentage input field. The process can then be performed for multiple locations, such as a second location and a third location. In the present disclosure, the third location is generally defined as a split location and the second location. Mapping the animated content item to the location of the animated content item within the viewport results in an improvement in the human-computer interaction process because the producer is provided with improved control over the animated content item. Additionally, the mapping can ensure, for example, that when a user scrolls (at their own pace) through a web page hosting the animated content item, the animated content item is presented in its entirety, thus further improving the end user experience. Further, the mapping provides the end user with control over how the animation is performed, thus providing an improved user interface.

[0032] In some embodiments, a second computing device receives location-dependent settings of an animated content item from a first computing device. The second computing device then configures attributes of the animated content item based on the received location-dependent settings such that the animated content item is configured to change attributes at a location of a viewport in accordance with the received location-dependent settings when presented within the viewport. This process can then be performed with respect to a second location and a third location such that there are three locations within the viewport each configured by a location-dependent setting at which attributes of the animated content item change. For example, during presentation of the animated content item, the second computing device can repeatedly determine the location of the animated content item relative to the viewport. For example, a user may be scrolling through a feed in which the animated content item exists such that the location of the animated content item relative to the viewport changes as the user scrolls. When it is determined that the animated content item has reached a specified location of the viewport in accordance with the location-dependent setting, the attributes of the animated content item change. The location-dependent settings can be transmitted to the second computing device either alone or together with the animated content item. In another example, data representative of the animated content item can be transmitted to the second computing device, where the data is configured such that the second computing device displays an animation of the animated content item within the viewport based on the location-dependent setting in accordance with the attributes of the animated content item. That is, the data representative of the animated content item can include one or more location-dependent settings for configuring the animated content item. Additionally, each location-dependent setting can be transmitted to the second computing device simultaneously.

[0033] In some embodiments, a third location enables an animated content item to interchange attributes of the animated content item in either direction of a scroll event. For example, the third location can enable the animated content item to not start presenting until the animated content item reaches the third location. In another example, the animated content item can animate a rotation attribute of the animated content item in a clockwise direction and once reaching the third location, start animating the animated content item in a counterclockwise direction. This configuration of the animated content item of the present disclosure outperforms a configuration of a non-causal animated content item because this configuration of the animated content item can operate in either direction during a scroll event (e.g., a scroll event of scrolling up or down on an article presented within a viewport of a computing device). Additionally, in some embodiments, there are one or more attributes of the animated content item. The one or more attributes of the animated content item can be configured individually.

[0034] In some embodiments, values of one or more attributes of an animated content item relative to a viewport are interpolated based on a viewport monitoring library. The viewport monitoring library can be configured such that a computing device identifies multiple coordinate values of the animated content item based on the relative position of the animated content item with respect to the viewport. For example, the viewport monitoring library can be configured to receive from the computing device information indicating movement (e.g., up or down) of a scroll tab of a scroll bar associated with the viewport or the animated content item. In some embodiments, the viewport monitoring library can be configured to monitor the position of the scroll tab relative to the scroll bar or relative to the viewport based on, for example, scroll information received from the computing device. That is, status information related to the position of the animated content item within the application is obtained and used to subsequently determine values of one or more attributes of the animated content item.

[0035] Now refer to Figure 1A , which depicts a block diagram of an embodiment of a system 100 for providing information via a network 130 according to an illustrative embodiment. The network 130 can include a local area network (LAN), a wide area network (WAN), a telephone network (such as a public switched telephone network (PSTN)), a wireless link, an intranet, the Internet, or a combination thereof. The system 100 can also include at least one data processing system or processing circuitry, such as a content management system 110. The content management system can communicate via the network 130, for example, with a content publisher computing device 120 and / or a user computing device 140. The content management system 110 can also include at least one logical device, such as a computing device having processing circuitry configured to execute instructions stored in a storage device to perform one or more operations described herein. The processing circuitry can include a microprocessor, an application specific integrated circuit (ASIC), a field programmable gate array (FPGA), etc., or a combination thereof. The memory can include, but is not limited to, any electrical, optical, magnetic, or any other storage device or transmission device capable of providing program instructions to the processor. The memory can include a floppy disk, a compact disc read only memory (CD-ROM), a digital versatile disc (DVD), a magnetic disk, a memory chip, a read only memory (ROM), a random access memory (RAM), an electrically erasable programmable read only memory (EEPROM), an erasable programmable read only memory (EPROM), flash memory, an optical medium, or any other suitable memory from which the processor can read instructions. The instructions can include code from any suitable computer programming language, such as, but not limited to C, C++, C#, HTML, Visual and XML. In addition to the processing circuitry, the content management system 110 may also include one or more databases (e.g., 116) configured to store data. The content management system 110 may also include an interface (e.g., the animation configuration interface 112) configured to receive data via the network 130 and provide data from the content management system 110 to any of the other systems and devices on the network 130. The content management system 110 may include one or more libraries (e.g., the viewport monitoring library 114). Additional details regarding Figure 2 are provided related to the functionality of the content management system 110.

[0036] The content publisher computing device 120 can be any type of computing device, including, for example, a desktop computer, a laptop or notebook computer, a mobile device (such as a tablet device or an electronic notepad), a personal digital assistant, a smart phone, a video game device, a television or a television set-top box (also referred to as a set-top box), a kiosk, a hosted virtual desktop, or any other such device capable of exchanging information via the network 130. The content publisher computing device 120 can be configured to exchange information with Figure 1A the content management system 110 and the user computing device 140 via the network 130. The content publisher computing device 120 can be any form of computing device including processing circuitry and a memory. The memory can store machine instructions that, when executed by the processing circuitry, cause the processing circuitry to perform one or more of the operations described herein. The memory can also store data that affects the presentation of one or more resources, animated content items, etc. on the computing device. The processor can include a microprocessor, an application specific integrated circuit (ASIC), a field programmable gate array (FPGA), etc. or a combination thereof. The memory can include, but is not limited to, any electrical, optical, magnetic, or any other storage device or transmission device capable of providing program instructions to the processor. The memory can include a floppy disk, a compact disc read only memory (CD-ROM), a digital versatile disc (DVD), a magnetic disk, a memory chip, a read only memory (ROM), a random access memory (RAM), an electrically erasable programmable read only memory (EEPROM), an erasable programmable read only memory (EPROM), a flash memory, an optical medium, or any other suitable memory from which the processor can read instructions. The instructions can include code from any suitable computer programming language, such as, but not limited to C, C++, C#, JSON, HTML, HTML5, XML, and Visual

[0037] The content publisher computing device 120 may execute a software application (e.g., a web browser or other application) to retrieve content from other computing systems and devices via the network 130. Such an application may be configured to retrieve the animation configuration interface 112 from the content management system 110. In one embodiment, the content publisher computing device 120 may execute a web browser application that provides an interface (e.g., the animation configuration interface 112) on the viewport of the content publisher computing device 120. The web browser application that provides the interface may operate by receiving an input of a uniform resource locator (URL), such as a web address, from an input device (e.g., a pointing device, a keyboard, a touch screen, or another form of input device). In response, one or more processors of the content publisher computing device 120 that execute instructions from the web browser application may request data from another device (e.g., the content management system 110) connected to the network 130 that is referred to by the URL address. Then, the other device may provide web page data and / or other data to the content publisher computing device 120 such that the interface will be presented on the viewport of the content publisher computing device 120. Accordingly, the browser window presents the interface to facilitate user interaction with the interface.

[0038] The user computing device 140 may be any type of computing device, including, for example, a desktop computer, a laptop or notebook computer, a mobile device (such as a tablet device or an electronic notepad), a personal digital assistant, a smart phone, a video game device, a television or a television auxiliary box (also known as a set-top box), a kiosk, a hosted virtual desktop, or any other such device capable of exchanging information via the network 130. The user computing device 140 may be configured to communicate with Figure 1AThe content management system 110 and the content publisher computing device 120 exchange information. The user computing device 140 can be any form of computing device including processing circuitry and a memory. The memory can store machine instructions that, when executed by the processing circuitry, cause the processing circuitry to perform one or more of the operations described herein. The memory can also store data that affects the presentation of one or more resources, animated content items, etc. on the computing device. The processor can include a microprocessor, an application specific integrated circuit (ASIC), a field programmable gate array (FPGA), etc. or a combination thereof. The memory can include, but is not limited to, any electrical, optical, magnetic, or any other storage device or transmission device capable of providing program instructions to the processor. The memory can include a floppy disk, a compact disc read only memory (CD-ROM), a digital versatile disc (DVD), a magnetic disk, a memory chip, a read only memory (ROM), a random access memory (RAM), an electrically erasable programmable read only memory (EEPROM), an erasable programmable read only memory (EPROM), flash memory, an optical medium, or any other suitable memory from which the processor can read instructions. The instructions can include code from any suitable computer programming language, such as, but not limited to C, C++, C#, JSON, HTML, HTML5, XML, and

[0039] Still referring to Figure 1A, the user computing device 140 may execute software applications (e.g., a web browser or other applications) to retrieve content from other systems and devices via the network 130. Such applications may be configured to retrieve one or more location-dependent settings from the content publisher computing device 120. In one embodiment, the user computing device 140 may execute a web browser application that provides one or more location-dependent settings such that an animated content item is configured to change one or more attributes of the animated content item at a location of the viewport according to one or more location-dependent settings when presented within the viewport of the user computing device 140. The web browser application that provides location-dependent settings may operate by receiving an input of a uniform resource locator (URL), such as a web address, from an input device (e.g., a pointing device, keyboard, touch screen, or other form of input device). In response, one or more processors of the user computing device 140 that execute instructions from the web browser application may request data from another device (e.g., the content publisher computing device 120) connected to the network 130 that is referred to by the URL address. Then, the other device may provide web page data and / or other data to the user computing device 140 such that an interface will be presented by the viewport of the user computing device 140. Accordingly, the browser window presents the animated content item according to the one or more retrieved location-dependent settings.

[0040] For example, the user computing device 140 may be configured to exchange information on the network 130 using protocols according to the Open Systems Interconnection (OSI) layers, e.g., using an OSI layer 4 transport protocol (such as the User Datagram Protocol (UDP), Transmission Control Protocol (TCP), or Stream Control Transmission Protocol (SCTP)) that is layered on top of an OSI layer 3 network protocol (such as the Internet Protocol (IP), e.g., IPv4 or IPv6). In some embodiments, the user computing device 140 includes one or more hardware elements for facilitating data input and data presentation, e.g., a keyboard, a display, a touch screen, a microphone, a speaker, and / or a haptic feedback device. In some embodiments, the user computing device 140 includes buttons, e.g., buttons for specific functions (e.g., audio device volume control, such as volume up, volume down, mute, etc.) and / or buttons with unknown functions (e.g., soft buttons that may be assigned specific functions at the software level).

[0041] In some embodiments, the user computing device 140 runs an operating system that manages the execution of software applications on the user computing device 140. In some embodiments, the operating system is provided with the user computing device 140. In some embodiments, the user computing device 140 executes a browser application (e.g., a web browser) that is capable of receiving data formatted according to the Hypertext Application Protocol Suite, such as Hypertext Transfer Protocol (HTTP) and / or HTTP Secure (HTTPS) encrypted via Transport Layer Security.

[0042] In some such embodiments, the browser facilitates interaction with one or more systems and devices via an interface presented on the user computing device 140 in the form of one or more web pages. In some embodiments, the browser application is provided to the user computing device 140. In some embodiments, the user computing device 140 executes a custom application, e.g., a game or other application that interacts with systems and devices (e.g., the content management system 110 and / or the content publisher computing device 120). The interaction between the custom application and the content management system 110 may use standard protocols (such as HTTP and HTTPS), or may use an application-specific protocol, e.g., a custom application layer protocol implemented over a transport layer protocol (such as UDP, TCP, or SCTP). In some embodiments, the user computing device 140 includes tools for obtaining and / or installing additional applications (such as custom applications) on the user computing device 140. In some embodiments, one or more of the systems and devices with which the user computing device 140 communicates support a custom instruction set, e.g., an Application Programming Interface (API), and the custom application executed on the user computing device 140 implements the API. The application may implement the API using, for example, libraries or Software Development Kits (SDKs) provided to the developer of the application.

[0043] The user computing device 140 may be configured to communicate (or exchange data) with various systems and devices, such as the content management system 110 and / or the content publisher computing device 120. In some embodiments, one or more of the content management system 110, the content publisher computing device 120, and the user computing device 140 are implemented using dedicated logic circuitry, e.g., an Application Specific Integrated Circuit (ASIC). In some embodiments, one or more of the content management system 110, the content publisher computing device 120, and the user computing device 140 are implemented using a System-on-Chip (SoC) semiconductor device that includes at least one processor (or microprocessor) core. In some embodiments, one or more of the content management system 110, the content publisher computing device 120, and the user computing device 140 are implemented using a general purpose computing processor.

[0044] Now refer toFigure 1B , which shows a block diagram depicting an embodiment of a content management system 110 according to an illustrative embodiment. The content management system 110 may run or otherwise be executed on one or more processors of a computing device. Broadly speaking, the content management system 110 may include an animation configuration interface 112, a viewport monitoring library 114, and a database 116. The animation configuration interface 112 may be provided to a content publisher computing device 120 for configuring animated content items. Generally, the animation configuration interface 112 may be rendered at the content publisher computing device 120 so that animatable content items may be configured and provided to a user computing device 140 for presentation. For example, a content publisher (user or human operator) using the content publisher computing device 120 may input one or more location-dependent settings into the animation configuration interface 112. Each location-dependent setting may include a location within the viewport at which one or more attributes of the animated content item change. Each attribute may be selected from a list (e.g., provided by the animation configuration interface 112 and / or the database 116) or may be provided by the content publisher.

[0045] The animation configuration interface 112 may include multiple interfaces and attributes, such as those described below in Figure 3 , Figure 4 , Figure 5 , Figure 6 , Figure 7 and Figure 8 . The animation configuration interface 112 may be executed at the content publisher computing device 120, the content management system 110, or both to provide the animation configuration interface 112 at the content publisher computing device 120. In one embodiment, the animation configuration interface 112 may be provided within a web browser. In another embodiment, a content generation application is executed without using a web browser to provide the content management system 110 at the content publisher computing device 120.

[0046] In one embodiment, an application executed by the content publisher computing device 120 can cause a web browser to be displayed on a monitor or screen of the content publisher computing device 120. The web browser operates by receiving an input of a Uniform Resource Locator (URL) in a field from an input device (e.g., a pointing device, a keyboard, a touch screen, or another form of input device). In response, the content publisher computing device 120 executing the web browser can request data, such as from the database 116. The web browser can include other functions, such as navigation controls (e.g., back and forward buttons). Then, the content management system 110 can execute the database 116 (or provide data from the database 116 to the content publisher computing device 120 for execution) to provide an animation configuration interface 112 at the content publisher computing device 120.

[0047] The viewport monitoring library 114 can be configured to cause the user computing device 140 to monitor the viewport of an application to append one or more of the animated content items identified by the content publisher computing device 120 (e.g., modify values for one or more attributes). In some embodiments, the viewport monitoring library 114 can be configured to cause the content management system 110 to monitor the viewport of an application to append one or more of the animated content items identified by the content publisher computing device 120 (e.g., modify values for one or more attributes). The viewport monitoring library 114 can be configured to cause the user computing device 140 to identify the animated content items. In some embodiments, the viewport monitoring library 114 can be configured to cause the content management system 110 to identify the animated content items. In some embodiments, the animated content items can be included in one or more location-dependent settings received by the content publisher computing device 120. In some embodiments, the animated content item can be a document object model element (i.e., DOM). In some embodiments, the animated content item can be a DOM element that can be rendered for presentation on the user computing device 140. In some embodiments, the animated content item can be a visual representation of a DOM element that can be rendered for presentation on the user computing device 140. In some embodiments, the animated content item can be an image animation, a video animation, etc. In some embodiments, the viewport monitoring library 114 can be configured to cause the user computing device 140 to identify an object of an image animation displayed on an application as an animated content item. In some embodiments, the viewport monitoring library 114 can be configured to cause the content management system 110 to identify an object of an image animation displayed on an application as an animated content item. In some embodiments, the animated content item can be included in a container, such as an iframe of the DOM tree of an application. The animated content item can be an article included in the container. In some embodiments, the animated content item can be any part of the article, e.g., a header, an image, a title, etc. The container can include one or more animated content items. The container can be configured to change one or more attributes of one or more animated content items in such a way that the animated content items correspond to a specific location within the viewport of the application.

[0048] The viewport monitoring library 114 can monitor the position of the animated content item relative to a reference point of the application so that when the animated content item moves through the viewport of the application, values of one or more attributes associated with the animated content item can be interpolated. In some embodiments, the viewport monitoring library 114 can monitor the position of the animated content item relative to the viewport to detect location-dependent settings in which the animated content item is presented within the viewport of the application.

[0049] In some embodiments, the viewport monitoring library 114 may be configured to cause the user computing device 140 to determine the coordinates of an animated content item relative to a reference point of the application. In some embodiments, the viewport monitoring library 114 may be configured to cause the content management system 110 to determine the coordinates of an animated content item relative to a reference point of the application. In some embodiments, the reference point of the application may include the top corner of the application. In some embodiments, the viewport monitoring library 114 may determine that the application is configured to extend vertically or horizontally. In embodiments in which the application is configured to extend vertically, the viewport monitoring library 114 may cause the user computing device 140 to determine the coordinate value of the animated content item along the vertical axis, or stated differently, the Y-axis coordinate. In embodiments in which the application is configured to extend horizontally, the viewport monitoring library 114 may cause the user computing device 140 to determine the coordinate value of the animated content item along the horizontal axis, or stated differently, the X-axis coordinate. The coordinate value may be a number of pixels, a distance, or a scaled distance from the reference point of the application. In some embodiments, the coordinate value may be a percentage corresponding to a point of the animated content item (e.g., the top edge of the animated content item).

[0050] In some embodiments, the point of the animated content item may be any point of the animated content item or any point corresponding to the animated content item. In some embodiments, the viewport monitoring library 114 may be configured to cause the user computing device 140 to identify a predefined point or portion on the animated content item (e.g., the center of the animated content item, one of the edges of the animated content item, one of the corners of the animated content item, etc.). In some embodiments, the viewport monitoring library 114 may cause the user computing device 140 to identify the coordinates of the animated content item that correspond to the axis along which the application may be scrolled. For example, if the application is configured to scroll vertically, the viewport monitoring library 114 may cause the user computing device 140 to identify one of the top edge or the bottom edge of the animated content item. If the application is configured to scroll horizontally, the viewport monitoring library 114 may cause the user computing device 140 to identify one of the left edge or the right edge of the animated content item.

[0051] The viewport monitoring library 114 can be configured to enable the user computing device 140 to monitor the coordinate values of an application based on the relative position of the application with respect to the viewport. For example, the viewport monitoring library 114 can enable the user computing device 140 to identify a first portion of the application that aligns with a first edge (e.g., the top edge) of the viewport. As the user scrolls (e.g., receives a scroll event) the application, different portions of the application will align with the first edge of the viewport. In some embodiments, the viewport monitoring library 114 can be configured to enable the user computing device 140 to periodically monitor which portion of the application aligns with the top edge of the viewport and which portion of the application aligns with the bottom edge of the viewport. In some embodiments, the viewport monitoring library 114 can be configured to enable the user computing device 140 to use existing JavaScript functions to identify a second coordinate value of a first portion of the application that aligns with the top edge of the viewport and a third coordinate value of a second portion of the application that aligns with the bottom edge of the viewport. For example, the viewport monitoring library 114 can use the function iframeElement.getBoundClientRect().top to identify the second coordinate value corresponding to a second portion of the application that aligns with the top edge of the viewport at a particular scroll position. The function iframeElement.getBoundClientRect().top returns the y coordinate that identifies the first portion of the application that aligns with the top edge of the viewport. Additionally, the viewport monitoring library 114 can use the function iframeElement.getBoundClientRect().bottom to identify the third coordinate value corresponding to a second portion of the application that aligns with the bottom edge of the viewport at a particular scroll position. In some embodiments, the third coordinate value can be determined by adding the height of the viewport to the second coordinate value.

[0052] In some embodiments, the viewport monitoring library 114 can be configured to enable the user computing device 140 to identify: a second coordinate value of a first portion of the application that aligns with a first position-dependent setting configured by the content publisher computing device 120 of the viewport, and a third coordinate value of a second portion of the application that aligns with a second position-dependent setting configured by the content publisher computing device 120 using the animation configuration interface 112. One or more position-dependent settings include a position within the viewport at which one or more attributes of an animated content item change. For example, the viewport monitoring library 114 can use one or more position-dependent settings to identify the second coordinate value corresponding to a second portion of the application that aligns with the first position-dependent setting within the viewport at a particular scroll position. Additionally, the viewport monitoring library 114 can use one or more position-dependent settings to identify the second coordinate value corresponding to a second portion of the application that aligns with the second position-dependent setting within the viewport at a particular scroll position.

[0053] In some embodiments, the viewport monitoring library 114 may be configured to cause the user computing device 140 to identify a fourth coordinate value of a third portion of an application that aligns with a third position-dependent setting of the viewport configured by the content publisher computing device 120 using the animation configuration interface 112.

[0054] To determine that an animated content item is visible within the viewport of an application executing on the user computing device 140, the viewport monitoring library 114 may determine whether a first coordinate value is between a second coordinate value and a third coordinate value. The viewport monitoring library 114 may be configured to compare the coordinate values of the animated content item with the coordinate values of the viewport. If the coordinate value of the animated content item is determined to be a number between the second coordinate value and the third coordinate value, between the second coordinate value and the fourth coordinate value, and / or between the third coordinate value and the fourth coordinate value, the viewport monitoring library 114 may determine that the animated content item is visible within the viewport.

[0055] In some embodiments, the viewport monitoring library 114 may be configured to cause the user computing device 140 to detect whether a scrolling activity occurs within the application. For example, the viewport monitoring library 114 may be configured to receive from the application information indicating a movement (e.g., up or down) of a scroll tag of a scroll bar associated with the viewport or the application. In some embodiments, the viewport monitoring library 114 may be configured to monitor the position of the scroll tag relative to the scroll bar or relative to the viewport based on, for example, the scroll information received from the application. In some embodiments, the viewport monitoring library 114 may determine whether a scrolling activity occurs by employing one or more listeners (including but not limited to "OnScroll", etc.) that detect the scrolling activity. In some embodiments, the viewport monitoring library 114 may be configured to monitor the viewport of the application.

[0056] The content management system 110 may include at least one database 116. The database 116 may include data structures for storing information such as the animation configuration interface 112, animated content items or other content items, or additional information. The database 116 may be part of the content management system 110, or a separate component accessible by the content management system 110, the content publisher computing device 120, or the user computing device 140 via the network 130. The database 116 may also be distributed throughout the system 100. For example, the database 116 may include multiple databases associated with the content publisher computing device 120, the user computing device 140, the content management system 110, or all of the above three. In one embodiment, the content management system 110 includes the database 116.

[0057] Now refer to Figure 2, A flowchart of method 200 for animating content items according to the configurations of the illustrative embodiments. The content management system 110, the content publisher computing device 120, and / or the user computing device 140 may be configured to execute method 200. Additionally, any of the computing devices described herein may be configured to execute method 200.

[0058] Broadly speaking, for method 200, at stage 210, an animation configuration interface 112 is provided to the content publisher computing device 120 to allow selection of location-dependent settings via the content publisher computing device 120. The location-dependent settings include a location within the viewport at which the properties of the animated content item change. At stage 220, the user computing device 140 receives the location-dependent settings from the content publisher computing device 120. At stage 230, the user computing device 140 configures the properties of the animated content item based on the location-dependent settings such that the animated content item is configured to change properties at the location within the viewport of the location-dependent settings received at stage 220 when presented within the viewport.

[0059] Referring to method 200 in more detail, at stage 210, an animation configuration interface 112 is provided to the content publisher computing device 120. For example, the content publisher computing device 120 may make a request for the animation configuration interface 112 to the content management system 110. In some embodiments, in response to the request, the content management system 110 provides the animation configuration interface to the content publisher computing device 120 via the network 130. In some embodiments, the animation configuration interface 112 is configured to allow selection of location-dependent settings including a location within the viewport at which the properties of the animated content item change via the content publisher computing device 120. In some embodiments, the animation configuration interface 112 is configured to allow selection of more than one location-dependent setting including more than one location within the viewport at which one or more properties of the animated content item change. Regarding Figure 3 , Figure 4 , Figure 5 , Figure 6 , Figure 7 and Figure 8 Additional details related to embodiments of the animation configuration interface 112 and configuring one or more location-dependent settings are provided herein.

[0060] At stage 220, the user computing device 140 receives the location-dependent settings. In some embodiments, the user computing device 140 may request the location-dependent settings of the animated content item by the user entering a URL into the address portion of a web browser. In some embodiments, the content publisher computing device 120, such as Figure 1AThe content publisher computing device 120 sends location-dependent settings to the user computing device 140 via the network 130 to enable the presentation of animated content items. In some embodiments, a content management system 110, such as Figure 1B The content management system 110 sends location-dependent settings to the user computing device 140 via the network 130 to enable the presentation of animated content items. In some embodiments, the user computing device 140 may request more than one location-dependent setting of an animated content item by the user entering a URL into the address portion of a web browser.

[0061] In some embodiments, the user computing device 140 receives one or more location-dependent settings. Each location-dependent setting may include a location within the viewport at which an attribute of the animated content item changes. In some embodiments, each location-dependent setting may include one or more attributes associated with the location within the viewport at which one or more attributes of the animated content item change.

[0062] In stage 230, the user computing device 140 configures the attributes of the animated content item based on the location-dependent settings such that the animated content item is configured to change attributes at the locations within the viewport of the location-dependent settings received in stage 220 when presented within the viewport. In some embodiments, the user computing device 140 may have to configure one or more location-dependent settings associated with the animated content item. In some embodiments, the user computing device 140 may have to configure one or more attributes associated with one or more location-dependent settings.

[0063] For example, the user computing device 140 may configure a first location within the viewport based on the received location-dependent settings. The user computing device 140 may then configure a second location and a third location such that there are three locations within the viewport each configured by a location-dependent setting at which one or more attributes of the animated content item change. In another example, the user computing device 140 may configure a fourth location within the viewport based on the received location-dependent settings.

[0064] Described below Figure 3An example implementation of an animation configuration interface 300 is shown. Generally, the animation configuration interface 300 can be rendered at the content publisher computing device 120 to configure one or more location-dependent settings associated with one or more animated content items. The animation configuration interface 300 can include multiple interfaces and objects. For example, the content management system 110 can execute to provide at least one asset panel 310, at least one animation timing panel 320, at least one layer panel 330, at least one property panel 340, at least one main panel 350, and at least one footer panel 370 for the animation configuration interface 300. In some implementations, each panel can include multiple sub-panels. In some implementations, each panel within the animation configuration interface 300 is operated by receiving input from an input device (e.g., a pointing device, keyboard, touch screen, or other form of input device). In response, the content publisher computing device 120 executing the animation configuration interface 300 can request data, such as animated content item 360, from a database (e.g., database 116) corresponding to the content management system 110 via the network 130. In some implementations, the content publisher computing device 120 executing the animation configuration interface 300 can request data, such as animated content item 360, from the data storage unit of the content publisher computing device 120.

[0065] The animation configuration interface 300 can be executed at the content publisher computing device 120, the content management system 110, or both to provide the animation configuration interface 300 at the content publisher computing device 120. In some implementations, the animation configuration interface 300 can be provided within a web browser. In some implementations, the content management system 110 is executed without using a web browser to provide the animation configuration interface 300 at the content publisher computing device 120. In one implementation, an application executed by the content publisher computing device 120 can cause the animation configuration interface 300 to be presented on the monitor or screen of the content publisher computing device 120.

[0066] In some embodiments, a content creator (user or human operator) using the content publisher computing device 120 may input one or more location-dependent settings into the animation timing panel 320 within the animation configuration interface 300. Each location-dependent setting may include a location within the viewport at which one or more attributes of the animated content item 360 change. Each location-dependent setting may include one or more attributes (e.g., translation, opacity, size). In some embodiments, each attribute may be configured individually using the animation timing panel 320 and / or the property panel 340 such that each attribute is independent of any other attribute. For example, a first location-dependent setting may be configured to set the opacity of the animated content item 360 to 70%, the size of the animated content item 360 to 30% of the width and 20% of the height, and the translation of the animated content item 360 to 60 pixels on the x-axis and 0 pixels on the y-axis. A second location-dependent setting may be configured to set the opacity of the animated content item 360 to 50%, the size of the animated content item 360 to 50% of the width and 50% of the height, and the translation of the animated content item 360 to 120 pixels on the x-axis and 60 pixels on the y-axis such that during a scroll event (e.g., scrolling up or down on an article presented within the viewport of the user computing device 140), the animated content item 360 changes one or more attributes depending on its location within the viewport. In some embodiments, the animation configuration interface 300 may configure one or more location-dependent settings based on the direction of the scroll event. Regarding Figure 4 , Figure 5 , Figure 6 , Figure 7 and Figure 8 Additional details regarding the animation timing panel 320 of the animation configuration interface 300 are provided herein.

[0067] In some embodiments, the animation configuration interface 300 may include an asset panel 310, which may include an asset preview sub-panel 312, an asset filtering sub-panel 314, an asset library sub-panel 316, and an add asset button 318. The asset preview sub-panel 312 may present previews of objects (e.g., images, videos, text, audio, scenes, objects in other forms) of the animated content item 360. In some embodiments, the asset preview sub-panel 312 presents previews of objects from the asset library sub-panel 316 in response to receiving a click, a click-and-drag, and / or a drop. The asset library sub-panel 316 within the asset panel 310 presents a list of objects. In some embodiments, by clicking the add asset button 318, an object (e.g., from a file folder on the content publisher computing device 120) can be added to the list of objects through click-and-drag, drop, insert, or attach operations on the object. In some embodiments, the asset library sub-panel 316 can be filtered using the asset filtering sub-panel 314. For example, a content creator (user or human operator) of the content publisher computing device 120 can enter one or more characters in the input field of the asset filtering sub-panel 314 within the animation configuration interface 300, and in response, any object presented in the asset library sub-panel 316 that does not match the entered characters is filtered out (i.e., stopped from being presented).

[0068] In some embodiments, the animation configuration interface 300 may include a layer panel 330, which may include a layer selection sub-panel 332, a delete layer button 334, and an add layer button 336. The layer selection sub-panel 332 presents a list of layers. In some embodiments, the layer selection sub-panel 332 can be used to add one or more layers to the animated content item 360. In some embodiments, for example, by clicking the add layer button 336, one or more layers can be added to the list of layers through click-and-drag, drop, insert, or attach operations on the one or more layers. In some embodiments, for example, by clicking the delete layer button 334, one or more layers can be removed from the list of layers through click-and-drag, drop, insert, or remove operations on the one or more layers.

[0069] In some embodiments, the animation configuration interface 300 may include an attribute panel 340, which may include a URL sub-panel 342 and an attribute configuration sub-panel 344. In some embodiments, the URL sub-panel 342 may receive input via the URL sub-panel 342 input field. For example, a content creator (user or human operator) using the content publisher computing device 120 may enter one or more characters in the URL sub-panel 342 input field within the animation configuration interface 300. The entered characters may be embedded in the animated content item 360 (e.g., a URL), such that when the animated content item 360 is selected within the viewport of the user computing device 140, the application is redirected to the company website.

[0070] In some embodiments, the attribute configuration sub-panel 344 may be used to configure one or more attributes of the animated content item 360. In some embodiments, each attribute may be configured individually using the attribute panel 340 and / or the animation timing panel 320 such that each attribute is independent of any other attribute. In some embodiments, one or more attributes may be based on one or more location-dependent settings. In some embodiments, each location-dependent setting may include a location within the viewport at which one or more attributes of the animated content item 360 change.

[0071] For example, a content creator (user or human operator) using the content publisher computing device 120 may configure using the attribute configuration sub-panel 344 such that a first location-dependent (i.e., start) setting: when the animated content item 360 moves through the viewport between the first location and the third (i.e., middle) location, rotate the animated content item 360 clockwise. The content creator (user or human operator) using the content publisher computing device 120 may also configure using the attribute configuration sub-panel 344 such that a second location-dependent (i.e., end) setting: when the animated content item 360 moves through the viewport between the third location and the second location, rotate the animated content item 360 counterclockwise.

[0072] In another example, a content creator (user or human operator) using the content publisher computing device 120 can use the property configuration sub-panel 344 to configure a first position-dependent (e.g., start) setting: when the animated content item 360 moves from the bottom of the viewport to the top of the viewport (e.g., from the viewport bottom 422 to the viewport top 420) through the viewport between the first position and the third (e.g., middle) position, rotate the animated content item 360 clockwise. Conversely, the content publisher computing device 120 can use the property configuration sub-panel 344 to configure a first position-dependent setting: when the animated content item 360 moves from the top of the viewport to the bottom of the viewport (e.g., from the viewport top 420 to the viewport bottom 422) through the viewport between the first position and the third position, rotate the animated content item 360 counterclockwise. Additionally, a content creator (user or human operator) using the content publisher computing device 120 can also use the property configuration sub-panel 344 to configure a second position-dependent (e.g., end) setting: when the animated content item 360 moves from the bottom of the viewport to the top of the viewport (e.g., from the viewport bottom 422 to the viewport top 420) through the viewport between the third position and the second position, rotate the animated content item 360 counterclockwise. Conversely, the content publisher computing device 120 can use the property configuration sub-panel 344 to configure a second position-dependent setting: when the animated content item 360 moves from the top of the viewport to the bottom of the viewport (e.g., from the viewport top 420 to the viewport bottom 422) through the viewport between the third position and the second position, rotate the animated content item 360 clockwise.

[0073] In some embodiments, the animation configuration interface 300 can include a main panel 350, which can include a start button 352, a middle button 354, an end button 356, a preview button 358, an animated content item 360, and a zoom widget 362. Each button (start button 352, middle button 354, end button 356, preview button 358) along the top of the panel, when selected, modifies the presentation of the animated content item 360. The zoom widget 362, when selected, can cause the animation configuration interface to generate an enlarged presentation of the animated content item 360 or a non-enlarged presentation of the animated content item 360 within the main panel 350.

[0074] In some embodiments, the start button 352, when selected, may cause the animation configuration interface 300 to generate a rendering of a first position-dependent (e.g., start) setting associated with the animated content item 360, where objects may be added or removed using the asset panel 310, layers may be added or removed using the layer panel 330, and properties (e.g., translation, opacity, size) may be added or removed using the property panel 340. The rendering may be animated by presenting an animated sequence of one or more properties (e.g., translation, opacity, size) associated with the first position-dependent setting.

[0075] In some embodiments, the middle button 354, when selected, may cause the animation configuration interface 300 to generate a rendering of a third position-dependent (e.g., middle) setting associated with the animated content item 360, where objects may be added or removed using the asset panel 310, layers may be added or removed using the layer panel 330, and properties (e.g., translation, opacity, size) may be added or removed using the property panel 340. The rendering may be animated by presenting an animated sequence of one or more properties (e.g., translation, opacity, size) associated with the third position-dependent setting.

[0076] In some embodiments, the end button 356, when selected, may cause the animation configuration interface 300 to generate a rendering of a second position-dependent (e.g., end) setting associated with the animated content item 360, where objects may be added or removed using the asset panel 310, layers may be added or removed using the layer panel 330, and properties (e.g., translation, opacity, size) may be added or removed using the property panel 340. The rendering may be animated by presenting an animated sequence of one or more properties (e.g., translation, opacity, size) associated with the second position-dependent setting.

[0077] In some embodiments, the preview button 358, when selected, may cause the animation configuration interface 300 to generate a preview of the animated content item 360, where an object is animated by presenting an animated sequence of one or more properties (e.g., translation, opacity, size) associated with the position-dependent setting between positions (e.g., a first position and a third position, a third position and a second position). In some embodiments, the position at which the animated content item is presented may be referred to as an animated content item slot (e.g., animated content item slot 426).

[0078] In some embodiments, the animation configuration interface 300 may include a footer panel 370, which may include a save button 372 and a cancel button 374. The save button 372, when selected, may cause the animation configuration interface 300 to save the configuration of the animated content item 360 in the database 116 or in the data storage unit of the content publisher computing device 120. The cancel button 374, when selected, may cause the animation configuration interface 300 to delete all configurations of the previously unsaved animated content item 360. In some embodiments, the animation configuration interface 300 may include other functions, such as a panel for configuring the full-screen mode. The full-screen mode may be configured so that the animated content item 360 is presented across the entire viewport. The full-screen mode may include an exit option and additional overlay functions, such as triggering the animation of the animated content item in full screen, camera zoom (for introductions), enabling the user of the user computing device 140 to change the color of an object, or zooming in and viewing the features of the animated content item in more detail.

[0079] In some embodiments, the animation configuration interface 300 may include other functions, such as a panel for configuring payment settings. The payment settings may include options for financial transactions, such as donations, product purchases, or any other type of financial transaction. In some embodiments, the animation configuration interface 300 may include other functions, such as a panel for configuring map and / or geolocation functions. In some embodiments, the animation configuration interface 300 may include other functions, such as a panel for add-ins. For example, a phone number add-in that enables a user interacting with the animated content item 360 to select the animated content item 360 to make a phone call. In some embodiments, the animation configuration interface 300 may include other functions, such as a panel for video editing. In some embodiments, the animation configuration interface 300 may include other functions, such as a panel for location timing settings. The location timing settings may include animating the start of the animated content item based on a time delay.

[0080] As described below Figure 4Shows an example implementation of an animation timing panel 400 within an animation configuration interface 300. The animation timing panel 400 depicts a user computing device template 402, such as a smart phone or a tablet device, on which an animated content item 360 can be presented through a viewport 418 of a computing device (e.g., user computing device 140). In some implementations, the viewport 418 is defined by an orientation that includes a viewport top 420 (e.g., 100%), a viewport bottom 422 (e.g., 0%), and a middle guideline (e.g., 50%). In some implementations, the animated content item 360 is presented within an animated content item slot 426. The animation timing panel 400 may include one or more configurable settings. In some implementations, the animation timing panel 400 may include a graphic frame 406, a slider interface 424, slider set points 408, slider set points 410, a graphic frame 412, input fields 414, and input fields 416. In some implementations, each frame, slider, field combination (e.g., graphic frame 406, slider set point 408, input field 414, or graphic frame 412, slider set point 410, input field 416) may perform similar functions and may be configured interchangeably such that whenever an input field changes, the slider and the graphic frame also change according to the input field.

[0081] Generally, each graphic frame can be a graphical representation of the position of the animated content item 360 within the viewport 418 that is movable to set a new position within the viewport 418 at which one or more attributes of the animated content item 360 change. For example, by clicking anywhere within the graphic frame boundary and dragging the graphic frame to a different position within the viewport 418. Each slider set point can be a slider set point representation of the position of the animated content item 360 within the viewport 418 that is movable to set a new position on the slider interface 424 at which one or more attributes of the animated content item 360 change. For example, by clicking on one of the slider set points and dragging the slider set point to a different position on the slider interface 424. Each input field can be a numerical representation of the position of the animated content item 360 within the viewport 418 that can receive input to set a new position at which one or more attributes of the animated content item 360 change. For example, by entering different numbers into the input field.

[0082] In some embodiments, an input device of the content publisher computing device 120 (e.g., a pointing device, a keyboard, a touch screen, or another form of input device) can be used to select and move each graphical frame. In some embodiments, the graphical frame 412 can be a graphical representation of the first position of the animated content item 360 within the viewport 418 that is movable to select the first position, at which one or more animations of the animated content item 360 begin to be presented. In some embodiments, the graphical frame 406 can be a graphical representation of the second position of the animated content item 360 within the viewport 418 that is movable to select the second position, at which one or more animations of the animated content item 360 end being presented.

[0083] For example, a content creator (user or human operator) using the content publisher computing device 120 can configure the graphical frame 412 to cause the animated content item 360 to start being presented when the computing device (e.g., the user computing device 140) receives a scroll event and after the animated content item 360 reaches the first position within the viewport 418. As shown, the graphical frame 412 is configured to start presenting the animated content item 360 after the animated content item 360 reaches the bottom 422 of the viewport.

[0084] In some embodiments, an input device (e.g., a pointing device, a keyboard, a touch screen, or another form of input device) of the content publisher computing device 120 can be used to select and move each slider setting point along the slider interface 424. In some embodiments, the slider setting point 408 can be a slider setting point representation of the first position of the animated content item 360 within the viewport 418 that is movable along the slider interface 424 to select the first position, at which one or more animations of the animated content item 360 begin to be presented. In some embodiments, the slider setting point 410 can be a slider setting point representation of the second position of the animated content item 360 within the viewport 418 that is movable along the slider interface 424 to select the second position, at which one or more animations of the animated content item 360 end being presented.

[0085] For example, a content creator (user or human operator) using the content publisher computing device 120 can configure the slider setting point 410 to cause the animated content item 360 to start being presented when the computing device (e.g., the user computing device 140) receives a scroll event and after the animated content item 360 reaches the first position within the viewport 418. As shown, the slider setting point 410 is configured to start presenting the animated content item 360 after the animated content item 360 reaches the bottom 422 of the viewport.

[0086] In some embodiments, each input field may receive input using an input device of the content publisher computing device 120 (e.g., a pointing device, a keyboard, a touch screen, or another form of input device). In some embodiments, the input field 416 may be a numerical representation of the first position of the animated content item 360 within the viewport 418 that can receive input to set the first position, at which one or more attributes of the animated content item 360 begin to be presented. In some embodiments, the input field 414 may be a numerical representation of the second position of the animated content item 360 within the viewport 418 that can receive input to set the second position, at which one or more attributes of the animated content item 360 end to be presented.

[0087] For example, a content creator (user or human operator) using the content publisher computing device 120 may enter numerical characters into the input field 416 to cause the animated content item 360 to start being presented when the computing device (e.g., the user computing device 140) receives a scroll event and after the animated content item 360 reaches the first position within the viewport 418. As shown, the input field 416 is configured to start presenting the animated content item 360 after the animated content item 360 reaches the bottom 422 of the viewport.

[0088] In some embodiments, one or more location-dependent attributes are configured on the user device (e.g., the user computing device 140). In some embodiments, the animated content item 360 may start being presented at any position within the viewport 418 and end being presented at any position within the viewport 418 (e.g., determined by the animated content item slot 426). For example, the location-dependent attribute may cause the user device to set one or more positions between the top 420 of the viewport and the bottom 422 of the viewport (e.g., the animated content item slot 426) among the location-dependent attributes. For example, the location-dependent attribute may be 5%, 10%, 15%, 80%, 85%, 85%, 90%, or any other percentage value between the top 420 of the viewport and the bottom 422 of the viewport. Considering Figure 5 the example in, for example, the location-dependent attribute is arranged between the 15% position and the 85% position within the viewport 518. Thus, the animated content item slot is between 15% and 85%, and thus, indicates that the animated content item 360 will only be presented between the animated content item slots 526. Accordingly, the location-dependent attributes configured by the content creator (user or human operator) using the content publisher computing device 120 may also configure any combination of positions within the viewport 418 to establish the animated content item slot 426 for the animated content item 360 to be presented between these positions.

[0089] In some embodiments, considering the examples in Figure 7 for example, the position-dependent attributes are arranged between 15% and 85%, and also include the position-dependent attribute at the 50% position. In some embodiments, it is beneficial for content producers to add multiple position-dependent attributes to the animated content item 360, because it provides additional flexibility and functionality for the animated content item 360. For example, when the scroll event within the viewport 718 is between the 15% position-dependent setting and the 50% position-dependent setting, multiple texts of the animated content item 360 can slide in a specified direction (e.g., horizontally or vertically). Alternatively, when the scroll event within the viewport 718 is between 50% and 85%, multiple texts of the animated content item 360 can slide in different directions. In some embodiments, a viewport monitoring library 114 can be provided to the user device (e.g., the user computing device 140) so that when the animated content item 360 is between 15% and 50% or between 50% and 85%, the values of one or more attributes of the animated content item 360 can be interpolated.

[0090] The following description Figure 5 shows an example embodiment of the animation timing panel 500 within the animation configuration interface 300. The animation timing panel 500 is similar to the similar features and functions described in detail in Figure 4 As shown, using the graphic frame 512, the slider set point 510, or the input field 516, the first position is set to 15% so that when the computing device (e.g., the user computing device 140) receives a scroll event and after the animated content item 360 reaches the first position (e.g., 15%) within the viewport 418, the animated content item 360 starts to be presented (e.g., within the animated content item slot 526). Also as shown, using the graphic frame 506, the slider set point 510, or the input field 514, the second position is set to 85% so that when the computing device (e.g., the user computing device 140) receives a scroll event and after the animated content item 360 reaches the second position (e.g., 85%) within the viewport 418, the animated content item 360 ends its presentation (e.g., not within the animated content item slot 526).

[0091] The following description Figure 6 shows an example embodiment of the animation timing panel 600 within the animation configuration interface 300. The animation timing panel 600 is similar to the reference in Figure 4Similar features and functions are described in detail. However, in some embodiments, the animation configuration interface 300 may include a graphical frame 628, slider set points 630, and input fields 632. For example, instead of having two positions within the viewport 418 where one or more property changes of the animated content item 360 are animated, the animation timing panel may enable a content creator (user or human operator) using the content publisher computing device 120 to configure a third position within the animated content item slot 626 using the graphical frame 628, slider set points 630, or input fields 632. In some embodiments, the animation timing panel may enable a content creator (user or human operator) using the content publisher computing device 120 to configure a fourth position within the animated content item slot 626 using different graphical frames, different slider set points, or different input fields. In Figure 6 In the example shown, the slider set point 630 for the third position is set at the midpoint 604 of the viewport 618 to correspond the graphical frame 628 to the middle portion of the viewport 618.

[0092] As described below Figure 7 illustrates an example implementation of an animation timing panel 700 within the animation configuration interface 300. The animation timing panel 700 is similar to the reference Figure 4 and Figure 6 Similar features and functions described in detail. As shown, using the graphical frame 712, slider set point 710, or input field 716, the first position is set to 15% so that when the computing device (e.g., user computing device 140) receives a scroll event and after the animated content item 360 reaches the first position (e.g., 15%) within the viewport 718, the animated content item 360 begins to be presented (i.e., within the animated content item slot 726). Also as shown, using the graphical frame 706, slider set point 708, or input field 714, the second position is set to 85% so that when the computing device (e.g., user computing device 140) receives a scroll event and after the animated content item 360 reaches the second position (e.g., 85%) within the viewport 718, the animated content item 360 ends being presented (e.g., not within the animated content item slot 726). Further as shown, using the graphical frame 728, slider set point 730, or input field 732, the third position is set to 50% so that after the animated content item 360 reaches the third position (e.g., 50%) within the viewport 718, one or more properties of the animated content item 360 may change.

[0093] As described below Figure 8 illustrates an example configuration of an animation timing panel 800 within the animation configuration interface 300. The animation timing panel 800 is similar to the reference Figure 4 andFigure 6 Similar features and functions described in detail. Additionally, the animation timing panel 800 can include functionality for configuring one or more attributes of the animated content item 360 based on its position within the viewport. In some embodiments, the animation timing panel 800 can include a first position-third position attribute 836, a first position-third position attribute 840, a second position-third position attribute 834, and a second position-third position attribute 838. Each first position-third position attribute is configured such that when the animated content item 360 is presented within the animated content item slot 826 between a first position (e.g., the slider set point 810) and a third position (e.g., the slider set point 830), the animated content item 360 is presented according to the configured attributes. For example, as shown, the animated content item 360 will be presented between the first and third positions with an opacity attribute of 100% and a fill opacity of 100%, and size attributes of 50% width and 75% height. The opacity controls the opacity of the entire animated content item 360, while the fill opacity only controls the opacity of the fill color (e.g., the background color of the animated content item 360). Conversely, each third position-second position attribute is configured such that when the animated content item 360 is presented within the animated content item slot 826 between a third position (e.g., the slider set point 830) and a second position (e.g., the slider set point 808), the animated content item 360 is presented according to the configured attributes. For example, as shown, the animated content item 360 will be presented between the third and second positions with an opacity attribute of 50% and a fill opacity of 75%, and size attributes that mirror the first position-third position attributes (e.g., are identical to them).

[0094] Now referring to Figure 9 , a block diagram of an example computing system 901 according to an illustrative embodiment is shown. In accordance with the illustrative embodiment, the computing system 901 is suitable for implementing the computerized components described herein. Broadly speaking, the computing system 901 includes a processor 902 for performing actions in accordance with instructions (e.g., instructions stored in the cache memory 903). The example computing system 901 shown includes one or more processors 902 and a coprocessor 904 communicating via a bus 905 with a main memory 906, a network interface controller 907, an input / output (I / O) interface 908, and a data storage device 909. In some embodiments, the computing system 901 can include additional interfaces or other components 916.

[0095] In some embodiments, the processor 902 may be configured to load instructions from the main memory 906 (or data storage device 909) into the cache memory 903. Additionally, the processor 902 may be configured to load instructions from the cache memory 903 into on-board registers and execute instructions from the on-board registers. In some embodiments, the instructions are encoded into a read-only memory (ROM) or firmware memory chip (e.g., storing instructions for a basic input / output system (BIOS)) not shown and are read therefrom.

[0096] As shown, the processor 902 is directly connected to the cache memory 903. However, in some embodiments, the cache memory 903 is integrated into the processor 902 and / or implemented on the same circuit or chip as the processor 902. Some embodiments include multiple levels or tiers of cache memory 903, each level or tier being further removed from the processor 902. Some embodiments include multiple processors 902 and / or coprocessors 904, the coprocessors 904 (e.g., a math coprocessor, a floating-point coprocessor, and / or a graphics coprocessor) enhancing the processor 902 by supporting additional specialized instructions. As shown, the coprocessor 904 is closely connected to the processor 902. However, in some embodiments, the coprocessor 904 is integrated into the processor 902 or implemented on the same circuit or chip as the processor 902. In some embodiments, the coprocessor 904 is further removed from the processor 902, e.g., connected to the bus 905.

[0097] The network interface controller 907 may be configured to control one or more network interfaces 917 for connection to network devices 914 (e.g., for accessing network 130). The I / O interface 908 may be configured to facilitate sending and receiving data to and from various I / O devices 918, such as but not limited to a keyboard, a touch screen, a microphone, a motion sensor, a video display, a speaker, a haptic feedback device, a printer, etc. In some embodiments, one or more of the I / O devices 918 are integrated into the computing system 901. In some embodiments, one or more of the I / O devices 918 are external to the computing system 901 and separable from the computing system 901. In some embodiments, the computing system 901 is implemented using dedicated logic circuitry, e.g., an application-specific integrated circuit (ASIC) or a system-on-chip (SoC) semiconductor device, which includes the processor 902 and one or more additional elements, such as the cache memory 903, the network interface controller 907 and network interface 917, and one or more I / O interfaces 908.

[0098] The processor 902 can be any logic circuitry that processes instructions, for example, instructions retrieved from a cache memory 903, a main memory 906, a data storage device 909, or other memories not shown. The processor 902 includes a plurality of data registers and instruction registers. In some embodiments, at power-on (boot-up), the processor 902 can be configured to load initial instructions from the BIOS into the registers (including instructions for loading more instructions) and execute the instructions from the registers. In some embodiments, the BIOS instructions cause the processor 902 to load an operating system (OS), which in turn causes the processor 902 to load and execute one or more programs.

[0099] The processor 902 can be enhanced by one or more auxiliary coprocessors, which are auxiliary processing units having a dedicated instruction set for a particular purpose. In some embodiments, the processor 902 in the face of an unrecognized instruction will pass the instruction to the coprocessor 904, for example, via a particular bus, and only generate an unrecognized instruction fault if the coprocessor 904 also does not recognize the instruction. The processor 902 and the coprocessor 904 can each be a single-core or multi-core processor.

[0100] The computing system 901 can include a plurality of distinct processors 902 and / or a plurality of distinct coprocessors 904. For example, in some embodiments, a general-purpose processor 902, such as a multi-core central processing unit (CPU), can be enhanced by one or more dedicated coprocessors, such as a math coprocessor, a floating-point coprocessor, or a graphics processing unit (GPU). For example, a math coprocessor can assist the processor 902 with high-precision or complex calculations. In some embodiments, the processor 902 and the coprocessor 904 are implemented as circuitry on one or more chips. The computing system 901 can be based on any processor 902 capable of operating as described herein, or a collection of processors 902 and / or coprocessors 904.

[0101] The cache memory 903 is generally a form of computer memory that is placed in close proximity to the processor 902 for fast access times. In some embodiments, the cache memory 903 is a memory circuit that is part of the processor 902 or on the same chip as the processor 902. In some embodiments, there are multiple levels of cache memory 903, for example, L2 and L3 cache layers. In some embodiments, multiple processors 902 and / or multiple cores of the processor 902 share access to the same cache memory 903.

[0102] The main memory 906 can be any device suitable for storing computer-readable data. The main memory 906 is a device that supports direct access to a specified address. For example, the main memory 906 is a random access memory (RAM). In some embodiments, the main memory 906 is a volatile semiconductor memory device, such as a dynamic random access memory (DRAM), a synchronous dynamic random access memory (SDRAM), a double data rate SDRAM (DDR SDRAM), a static random access memory (SRAM), a T-RAM, a Z-RAM, etc. The computing system 901 can have any number of devices serving as the main memory 906.

[0103] The data storage device 909 can be any device suitable for storing computer-readable data between power cycles. In some embodiments, the data storage device 909 is a device having a fixed storage medium (such as a magnetic disk, e.g., a hard disk drive (HDD)). In some embodiments, the data storage device 909 is a device having a removable storage medium (such as a magnetic disk (e.g., a floppy disk drive or a removable HDD), a magnetic tape, a magneto-optical disk, or an optical disk (e.g., a CD-ROM, a DVD-ROM, or a BLU-RAY disk)). In some embodiments, the data storage device 909 is a non-volatile semiconductor memory device, such as an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. In some embodiments, the main memory 906 is a solid state drive (SSD), e.g., using multi-level cell (MLC) NAND-based flash memory. The computing system 901 can have any number of devices serving as the data storage device 909.

[0104] Still referring to Figure 9 , the bus 905 is an interface that provides data exchange between various internal components of the computing system 901. For example, it connects the processor 902 to the main memory 906, the network interface controller 907, the I / O interface 908, and the data storage device 909. In some embodiments, the bus 905 further provides data exchange with one or more components external to the computing system 901 (such as other components 916). In some embodiments, the bus 905 includes serial and / or parallel communication links. In some embodiments, the bus 905 implements a data bus standard, such as Integrated Drive Electronics (IDE), Peripheral Component Interconnect Express (PCI), Small Computer System Interface (SCSI), or Universal Serial Bus (USB). In some embodiments, the computing system 901 has multiple buses 905.

[0105] The computing system 901 may include one or more input or output (I / O) devices 918 or provide an I / O interface 908 for one or more input or output (I / O) devices 918. The input / output devices 918 include input devices such as, but not limited to, a keyboard, a touch screen, a touchpad (e.g., an electromagnetic induction plate, an electrostatic plate, a capacitive plate, etc.), a microphone, a joystick, a foot pedal, an inertial measurement unit (IMU), an accelerometer, a gyroscope, a tilt sensor, a motion sensor, an environmental sensor, a Musical Instrument Digital Interface (MIDI) input device (such as a MIDI musical instrument (e.g., a MIDI keyboard)), a stylus, and a pointing device (such as a mouse or a trackball). The output devices include, but are not limited to, a video display, a speaker, a haptic feedback device, a refreshable braille terminal, a light, a servo device, a MIDI output device (such as a MIDI synthesizer), and a two-dimensional or three-dimensional printer (including, but not limited to, an inkjet printer, a laser printer, a thermal printer, a stereolithography printer, an extrusion deposition printer, and a metal sintering printer).

[0106] The network 130 enables communication between various nodes such as the computing system 901 and the network device 914. In some embodiments, data flows through the network 130 in the form of a stream of data packets, e.g., in the form of data packets according to the Open Systems Interconnection (OSI) layers, from a source node to a destination node. The stream of packets may use, for example, an OSI layer 4 transport protocol (such as the User Datagram Protocol (UDP), the Transmission Control Protocol (TCP), or the Stream Control Transmission Protocol (SCTP)), which is layered over an OSI layer 3 network protocol (such as the Internet Protocol (IP), e.g., IPv4 or IPv6) and transmitted via the network 130. The network 130 is composed of various network devices (nodes) that are linked together to form one or more data communication paths between the participating devices. Each networked device includes at least one network interface for receiving and / or transmitting data (typically as one or more data packets). An illustrative network 130 is the Internet; however, other networks may be used. The network 130 may be an autonomous system (AS), i.e., a network that operates under a consistent unified routing policy (or at least appears to be so from outside the AS network) and is generally managed by a single administrative entity (e.g., a system operator, a manager, or a management group).

[0107] Network 130 may be composed of multiple connected sub - networks or AS networks, and the sub - networks or AS networks may meet at one or more of the following: intermediate network (transit network), dual - homed gateway node, point of presence (POP), Internet exchange point (IXP), and / or additional other network boundaries. Network 130 may be a local area network (LAN) (such as a corporate intranet), a metropolitan area network (MAN), a wide area network (WAN), a wide area network, an interconnected network (such as the Internet), or a peer - to - peer network (e.g., an ad - hoc Wi - Fi peer - to - peer network). The data links between nodes in Network 130 may be any combination of physical links (e.g., fiber optic, mesh, coaxial, twisted pair such as Cat - 5 or Cat - 6, etc.) and / or wireless links (e.g., radio, satellite, microwave, etc.).

[0108] Network 130 may include a carrier network for mobile communication devices, e.g., a network implementing a wireless communication protocol such as Global System for Mobile Communications (GSM), Code Division Multiple Access (CDMA), Time Division - Synchronous Code Division Multiple Access (TD - SCDMA), Long Term Evolution (LTE), or any other such protocol (including but not limited to the so - called generation 3G, 4G, and 5G protocols). Network 130 may include short - range wireless links, e.g., via Wi - Fi, BLUETOOTH, BLE, or ZIGBEE, sometimes referred to as a personal area network (PAN) or a mesh network. The network may be a public network, a private network, or a combination of a public network and a private network. Network 130 may be any type and / or form of data network and / or communication network.

[0109] Network interface controller 907 manages data exchange with devices (e.g., network device 914) in Network 130 via network interface 917 (sometimes called a network interface port). Network interface controller 907 processes the physical layer and the data link layer of the Open Systems Interconnection (OSI) model for network communication. In some embodiments, some of the tasks of the network interface controller are handled by processor 902 and / or coprocessor 904. In some embodiments, network interface controller 907 is incorporated into processor 902, e.g., as circuitry on the same chip. In some embodiments, computing system 901 has multiple network interfaces 917 controlled by a single network interface controller 907. In some embodiments, computing system 901 has multiple network interface controllers 907. In some embodiments, each network interface 917 is a connection point for a physical network link (e.g., a Cat - 5 Ethernet link).

[0110] In some embodiments, network interface controller 907 supports wireless network connections, and interface 917 is a wireless (e.g., radio) receiver / transmitter (e.g., for any of the IEEE 802.11 Wi-Fi protocol, Near Field Communication (NFC), BLUETOOTH, BLUETOOTH Low Energy (BLE), ZIGBEE, ANT, or any other wireless protocol). In some embodiments, network interface controller 907 implements one or more network protocols, such as Ethernet. Generally, computing system 901 may be configured to exchange data with other computing devices via network interface 917 over a physical or wireless link. Network interface 917 may be directly linked to another device, or linked to another device via an intermediate device (e.g., network device 914 that connects computing system 901 to network 130, such as a hub, bridge, switch, or router).

[0111] Network device 914 may be a hub, switch, router, modem, bridge, another computing system 901, or any other network node. In some embodiments, network device 914 is a network gateway. In some embodiments, network device 914 is a routing device implemented using custom hardware (such as a dedicated processor and / or ternary content-addressable memory (TCAM), etc.).

[0112] Other components 916 may include alternative I / O interfaces, external serial device ports, and any additional coprocessors 904 connected via bus 905. For example, computing system 901 may include an interface (e.g., a Universal Serial Bus (USB) interface) for connecting external input devices, output devices, or additional memory devices (e.g., a portable flash drive or an external media drive).

[0113] The illustrated computing system 901 is suitable for implementing a system for managing or organizing data. For example, in some embodiments, computing system 901 hosts a database. A database, or more specifically a database management system (DBMS), organizes data according to a database definition (e.g., a database schema). For example, in a relational database, the DBMS maintains data in a table-like data structure. Each table has columns, and each column corresponds to an entry type, classification, or purpose. For example, a table may have a column for numerical data, a column for text data (e.g., a description of the numerical data), a column for date data, etc. In some embodiments, a column represents structured data that combines multiple data elements into a single column. In a relational database, each entry in a column of a table is also in a row that associates the entry with entries in other columns of the table.

[0114] In some instances, an entry (or combination of entries) will associate a row from one table with one or more rows in another table. In some DBMS implementations, a virtual table called a "view" represents data pulled from one or more tables as if it were also a table (i.e., to a database client or user, the view appears as if it were a table, but it need not be stored as such). Other types of database management systems can also be used, including various types of relational databases, object-oriented databases, document-oriented databases, extensible markup language (XML) databases, NoSQL databases, etc. Many of these database types use tables or table-like structures in a manner similar to that described above for relational databases. In some database implementations, data is stored or represented in ways other than tables, for example, as a collection of data primitives.

[0115] A client or user of a database can use database instructions (e.g., queries in a database query language such as Structured Query Language (SQL)) to add data to the database, modify data in the database, or retrieve data from the database. One or more database instructions can be combined together into a database transaction. Traditionally, databases provide atomicity, consistency, isolation, and durability for transactions. These properties are known by the acronym ACID. In some implementations, the DBMS provides all of the ACID properties. However, in some implementations, the DBMS does not provide all of the ACID properties.

[0116] In some embodiments, one or more client devices 120 (e.g., instances of computing system 901) communicate with a DBMS, e.g., via a direct link or via network 130. In some embodiments, one or more of the clients obtain data from the DBMS using a query in a formal query language, such as Structured Query Language (SQL), HyperText Structured Query Language (HTSQL), Contextual Query Language (CQL), Data Mining eXtensions (DMX), or XML Query (XQuery). In some embodiments, one or more of the clients obtain data from the DBMS using an interprocess communication architecture, such as Common Object Request Broker Architecture (CORBA), Remote Procedure Call (RPC), Object Linking and Embedding (OLE), Component Object Model (COM), or Distributed Component Object Model (DCOM). In some embodiments, one or more of the clients obtain data from the DBMS using a natural language or semantic query. In some embodiments, one or more of the clients obtain data from the DBMS using a custom query language, such as a Visualization API query language. Embodiments of the subject matter and the operations described in this specification can be implemented as digital electronic circuitry or as computer software, firmware, or hardware embodied in a tangible medium, including the structures disclosed in this specification and their structural equivalents, or combinations of one or more of them. Embodiments of the subject matter described in this specification can be implemented as one or more computer programs embodied in a tangible medium, i.e., one or more modules of computer program instructions encoded on one or more computer storage media for execution by, or to control the operation of, data processing apparatus, including, for example, processor 902. A computer storage medium may be, or be included in, a computer-readable storage device, a computer-readable storage substrate, a random access or serial access memory array or device, or a combination of one or more of them. A computer storage medium may also be, or be included in, one or more separate components or media (e.g., multiple CDs, disks, or other storage devices). A computer storage medium is tangible. A computer storage medium stores data in a non-transitory form, e.g., computer-executable instructions.

[0117] A computer program (also known as a program, software, software application, script, or code) can be written in any form of programming language, including compiled languages, interpreted languages, declarative languages, and procedural languages; and a computer program can be deployed in any form, including as a stand-alone program or as a module, component, subroutine, object, or other unit suitable for use in a computing environment. A computer program, can but need not, correspond to a file in a file system. The program can be stored in a part of a file that holds other programs or data (e.g., one or more scripts stored in a markup language document), in a single file dedicated to the program, or in multiple coordinated files (e.g., files that store one or more modules, libraries, subroutines, or portions of code). A computer program can be deployed to execute on one computer or on multiple computers located at one site or across multiple sites and interconnected by a communication network.

[0118] The processes and logical flows described in this specification can be performed by one or more programmable processors executing one or more computer programs to perform actions by operating on input data and generating output. The processes and logical flows can also be performed by special purpose logic circuitry, e.g., a field programmable gate array (“FPGA”) or an application specific integrated circuit (“ASIC”), and the apparatus can also be implemented as special purpose logic circuitry, e.g., a field programmable gate array (“FPGA”) or an application specific integrated circuit (“ASIC”). Such special purpose circuitry can be referred to as a computer processor even though it is not a general purpose processor.

[0119] Although this specification contains many specific implementation details, these should not be construed as limitations on the scope of any invention or of what may be claimed, but rather as descriptions of specific features of particular embodiments of a particular invention. Certain features that are described in this specification in the context of separate embodiments can also be implemented in combination in a single embodiment. Conversely, various features that are described in the context of a single embodiment can also be implemented separately in multiple embodiments or in any suitable sub-combination. Moreover, although features may have been described above as acting in certain combinations and even initially claimed as such, one or more features in a claimed combination can in some cases be excised from the combination, and the claimed combination can be directed to a sub-combination or variation of a sub-combination.

[0120] Similarly, although operations are depicted in the drawings in a particular order, this should not be construed as requiring that the operations be performed in the particular order shown or in sequential order, to achieve the desired results. In some cases, multitasking and parallel processing may be advantageous. Moreover, the separation of various system components in the embodiments described above should not be understood as requiring such separation in all embodiments, and it should be understood that the program components and systems described generally may be integrated together in a single software product or packaged in multiple software products.

[0121] The use of the term "or" may be interpreted as being inclusive, such that any term using "or" may indicate any one of a single, more than one, or all of the terms so described. The labels "first," "second," "third," etc., need not necessarily imply ordinality and generally are only used to distinguish among items or elements that are the same or similar.

[0122] Accordingly, particular embodiments of the subject matter have been described. Other embodiments are within the scope of the appended claims. In some instances, the actions recited in the claims may be performed in a different order and still achieve the desired results. Additionally, the processes depicted in the drawings need not be in the particular order shown or in sequential order to achieve the desired results. In certain embodiments, multitasking or parallel processing may be used.

Claims

1. A method of configuring an animated content item, the method configuring the animated content item based on the position of the animated content item within the viewport of a computing device on which the animated content item is presented, the method comprising: providing an animation configuration interface to a first computing device, the animation configuration interface being configured to allow selection of position-dependent settings during a scroll event via the first computing device, the position-dependent settings being based on a first slider set point and a second slider set point, the first slider set point including a first position at which an attribute of the animated content item within the viewport begins, and the second slider set point including a second position at which the attribute of the animated content item within the viewport ends; obtaining, via the first computing device, data indicative of user input, the user input corresponding to: dragging the first slider set point to select a first position within the viewport at which one or more animations of the animated content item begin the attribute; and dragging the second slider set point to select a second position within the viewport at which one or more animations of the animated content item end the attribute; and providing the position-dependent settings to a second computing device, the position-dependent settings being triggered by the position of the animated content item within the viewport of the second computing device, wherein the position-dependent settings cause the second computing device to begin the attribute of the animated content item when the animated content item reaches the first position and to end the attribute of the animated content item when the animated content item reaches the second position.

2. The method according to claim 1, wherein, the animation configuration interface is configured to allow selection of a second position-dependent setting based on a third slider set point.

3. The method according to claim 1, wherein, the attribute of the animated content item configures the animation of the animated content item to change as the animated content item moves through the viewport between the first position and the second position.

4. The method according to claim 3, wherein, the animation configuration interface is configured to allow selection of a third position-dependent setting including a third position within the viewport.

5. The method according to claim 1, wherein, selection of the position-dependent settings via the first computing device is allowed by at least one of a sliding interface and a percentage input, wherein the sliding interface allows sliding of coordinate values associated with a slider set point at which an attribute of the animated content item within the viewport changes, and the percentage input allows input of a percentage value associated with a reference point at which an attribute of the animated content item within the viewport changes.

6. The method according to claim 1, wherein, the animation configuration interface includes a graphical representation of the position of the animated content item within the viewport, the graphical representation being movable to select a position at which an attribute of the animated content item within the viewport changes.

7. The method according to claim 1, wherein, the attribute includes rotation of the animated content item.

8. The method according to claim 7, wherein, the position-dependent setting includes the position where the rotation of the animated content item within the viewport starts.

9. The method according to claim 8, wherein, the animation configuration interface is configured to allow selection of a second position where the rotation of the animated content item within the viewport ends.

10. The method according to claim 1, wherein, the animated content item includes an image animation or a video animation.

11. The method according to claim 1, further comprising: receiving, by a third computing device, the position-dependent setting, and configuring an attribute of the animated content item based on the position-dependent setting such that the animated content item is configured to change the attribute at a position in the viewport of the third computing device according to the position-dependent setting when presented within the viewport of the third computing device.

12. The method according to claim 1, further comprising: determining a position of the animated content item relative to the viewport of a second computing device; determining that the position of the animated content item relative to the viewport of the second computing device matches the position in the viewport according to the position-dependent setting; changing an attribute of the animated content item.

13. The method according to claim 1, wherein, the attribute includes a value interpolated based on the position of the animated content item within the viewport.

14. A system for configuring an animated content item, comprising: at least one computing device operatively coupled to at least one memory and configured to: provide an animation configuration interface to a first computing device, the animation configuration interface being configured to allow selection of a position-dependent setting via the first computing device during a scroll event, the position-dependent setting being based on a first slider setting point and a second slider setting point, the first slider setting point including a first position where an attribute of the animated content item within the viewport starts, and the second slider setting point including a second position where the attribute of the animated content item within the viewport ends; obtain, via the first computing device, data indicative of user input, the user input corresponding to: dragging the first slider setting point to select a first position within the viewport where one or more animations of the animated content item start the attribute; and dragging the second slider setting point to select a second position within the viewport where one or more animations of the animated content item end the attribute; and providing the position-dependent setting to a second computing device, wherein the position-dependent setting is triggered by the position of the animated content item within the viewport of the second computing device, and wherein the position-dependent setting causes the second computing device to start the attribute of the animated content item when the animated content item reaches the first position and end the attribute of the animated content item when the animated content item reaches the second position.

15. The system according to claim 14, wherein, The animation configuration interface is configured to allow selection of a second position-dependent setting based on a third slider set point.

16. The system according to claim 14, wherein, the animation configuration interface is configured to allow selection of a third position-dependent setting.

17. The system according to claim 14, wherein, the animated content item includes an image animation or a video animation.

18. The system according to claim 14, wherein, the first computing device is configured to: select a second position-dependent setting including a second position within the viewport; select a third position-dependent setting including a third position within the viewport; select a fourth position-dependent setting including a partial position within the viewport.

19. One or more computer-readable storage media having instructions stored thereon that, when executed by at least one processor, cause the at least one processor to perform operations, the operations including: receiving, by a first computing device, an animation configuration interface from a content management system, the animation configuration interface being configured to allow selection of position-dependent settings during a scroll event, the position-dependent settings being based on a first slider set point and a second slider set point, the first slider set point including a first position where an attribute of an animated content item within the viewport begins, and the second slider set point including a second position where the attribute of the animated content item within the viewport ends; obtaining, via the first computing device, data indicative of user input, the user input corresponding to: dragging the first slider set point to select a first position within the viewport at which one or more animations of the animated content item begin the attribute; and dragging the second slider set point to select a second position within the viewport at which one or more animations of the animated content item end the attribute; and providing the position-dependent setting to a second computing device, the position-dependent setting being triggered by a position of the animated content item within the viewport of the second computing device, wherein the position-dependent setting causes the second computing device to start the attribute of the animated content item when the animated content item reaches the first position and to end the attribute of the animated content item when the animated content item reaches the second position.

Images