Systems and methods for visually creating and editing scrolling actions

A computer-implemented method for creating a scroll-triggered animation within a development environment, the method comprising:

• identifying a first element to be animated on a canvas, the canvas displaying a document being edited in the development environment for use in an end use environment, wherein the first element is at a position relative to a second element from the document and displayed on the canvas;
• and
• defining, via a processor, the scroll-triggered animation to move the first element within the document in response to scrolling the document in the end use environment, wherein defining the scroll-triggered animation comprises:
• displaying an adjustable indicator on the canvas that identifies a location in the document of a key position for the scroll-triggered animation;
• receiving, via an indicator displayed on the canvas, a first input of a numerical value on a dialogue box displayed on the canvas that updates the location in the document of the key position, wherein the key position is adjustable separately from the first element;
• receiving, via the canvas, a second input specifying a plurality of animation attributes relative to the key position,
• wherein the second input specifies (i) a before-effect defined by a first one of the animation attributes applied to the first element before the scroll is at the key position in the end use environment and (ii) an after-effect defined by a second one of the animation attributes applied to the first element after the scroll is at the key position in the end use environment,
• wherein the location in the document of the key position specifies relative to where, in the scrolling of the document, the specified animation attributes will apply to a movement of the first element relative to the second element;
• and
• automatically creating, via the processor, the scroll-triggered animation for the first element based on the first and second inputs received for the key position and the animation attribute, wherein the scroll-triggered animation comprises the before-effect and the after-effect.

A non-transitory computer-readable medium on which is encoded program code for creating a scroll-triggered animation within a development environment, the program code comprising:

• program code for identifying a first element to be animated on a canvas, the canvas displaying a document being edited in the development environment for use in an end use environment;
• and
• program code for defining, via a processor, the scroll-triggered animation to move the first element within the document in response to scrolling the document in the end use environment, wherein the first element is at a position relative to a second element from the document and displayed on the canvas, wherein defining the scroll-triggered animation comprises:
• program code for displaying an adjustable indicator on the canvas that identifies a location in the document of a key position for the scroll-triggered animation;
• program code for receiving, via the indicator displayed on the canvas, a first input updating the location in the document of the key position, wherein the key position is adjustable separately from the first element;
• program code for receiving, via the canvas, a second input specifying a plurality of animation attributes relative to the key position,
• wherein the second input specifies (i) a before-effect defined by a first one of the animation attributes applied to the first element before the scroll is at the key position in the end use environment and (ii) an after-effect defined by a second one of the animation attributes applied to the first element after the scroll is at the key position in the end use environment,
• wherein the location in the document of the key position specifies where, in the scrolling of the document, the specified animation attributes will apply to a movement of the first element relative to the second element;
• and
• program code for automatically creating, via the processor, the scroll-triggered animation for the first element based on the first and second inputs received for the key position and the animation attribute, wherein the scroll-triggered animation comprises the before-effect and the after-effect.

A computer implemented method for creating scroll-triggered animations within a development environment, the method comprising:

• identifying a first element to be animated and a second element to be animated on a canvas, the canvas displaying a document being edited in the development environment for use in an end use environment, wherein the first element is at a position relative to a third element from the document and displayed on the canvas;
• and
• defining, via a processor, a first scroll-triggered animation for the first element and a second scroll-triggered animation for the second element, wherein the scroll-triggered animations move the first element and the second element within the document in response to scrolling the document in the end use environment, wherein defining the scroll-triggered animations comprises:
• displaying an adjustable indicator on the canvas that identifies respective locations in the document for a first key position and a second key position for the scroll-triggered animation;
• receiving, via the indicator displayed on the canvas, a first input updating the respective locations in the document for the first key position and the second key position, wherein the key positions are adjustable separately from the first element and the second element;
• receiving, via the canvas, a second input specifying respective animation attributes relative to the key positions,
• wherein the second input specifies (i) a before-effect defined by a first one of the animation attributes applied to the first element before the scroll is at the first key position in the end use environment and (ii) an after-effect defined by a second one of the animation attributes applied to the first element after the scroll is at the first key position in the end use environment,
• wherein the respective locations in the document of the key positions specifies where, in the scrolling of the document, the specified animation attributes will apply to a movement of the first element and the second element relative to the third element;
• automatically creating, via the processor, the first scroll-triggered animation for the first element based on the first and second inputs received for the first key position and the respective animation attribute, wherein the first scroll-triggered animation comprises the before-effect and the after-effect;
• and
• automatically creating, via the processor, the second scroll-triggered animation for the second element based on the first and second inputs received for the second key position and the respective animation attribute, the first scroll-triggered animation and second scroll-triggered animation synchronized during a scroll of the document in the end use environment by a relation of the first key position and the second key position relative to a scroll position.

A computer implemented method for creating a scroll-triggered animation within a development environment, the method comprising:

• identifying a first element to be animated on a canvas, the canvas displaying a document being edited in the development environment for use in an end use environment;
• and
• defining, via a processor, the scroll-triggered animation to move the first element within the document in response to scrolling the document in the end use environment, wherein defining the scroll-triggered animation comprises:
• displaying an adjustable indicator on the canvas that identifies respective locations in the document for a first key position and a second key position for the scroll-triggered animation;
• receiving, via the indicator displayed on the canvas, a first input updating the respective locations in the document for the first key position and the second key position that together define a range of locations, wherein the key positions are adjustable separately from the first element;
• receiving, via the canvas, a second input specifying animation attributes relative to the key positions,
• wherein the second input specifies (i) a before-effect defined by a first one of the animation attributes applied to the first element before the scroll is at the first key position in the end use environment and (ii) an after-effect defined by a second one of the animation attributes applied to the first element after the scroll is at the first key position in the end use environment,
• wherein the range of locations of the key positions specifies where, in the scrolling of the document, the specified animation attributes will apply to a color change to the first element;
• and
• automatically creating, via the processor, the scroll-triggered animation for the first element based on the first and second inputs received for the key positions and the animation attributes, wherein the scroll-triggered animation comprises the before-effect and the after-effect.