Visual Scroll-Triggered Animation Editor

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Existing techniques for creating scroll-triggered animation on web pages require developers to write code without easy observation or testing, leading to a time-consuming loop of coding, executing, and viewing, especially when animating multiple elements.

Innovation Solution

An animation creation environment that allows users to visually create and edit scroll-triggered animation by identifying elements on a canvas, defining key positions, and specifying animation attributes through indicators and dialog boxes, reducing the need for coding and facilitating quicker creation and modification of animations.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Productivity

If developers write code to create scroll-triggered animation without visual feedback, then the animation can be created, but the development time increases due to repeated coding, executing, and viewing loops

Engineering Contradiction:

Improveanimation creation speedVSAvoidtime spent in code-execute-view loop

Core Design Contradiction:

ProductivityVSLoss of time

Solution Approach 1:

The patent replaces the mechanical coding-execute-view loop with a visual drag-and-drop interface. Users can create scroll-triggered animations by visually dragging elements to key positions on a canvas, eliminating the need to manually write and test code repeatedly. This substitution of visual interaction for code manipulation directly addresses the productivity-time loss contradiction.

Inventive Principle:

Principle #28Mechanics substitution (Replace mechanical system)

Solution Approach 2:

The patent implements real-time visual feedback by displaying the animation preview directly on the canvas as users create it. The system shows key positions, element locations, and animation effects immediately during the creation process, allowing users to see results without executing code. This continuous feedback mechanism eliminates the iterative coding loop and significantly reduces development time.

Inventive Principle:

Principle #23Feedback

2Ease of manufacture

If developers manually calculate and code positions for multiple animated elements, then the animation can be created, but the complexity of the process increases

Engineering Contradiction:

Improveease of creating animationVSAvoidcomplexity of coding and testing process

Core Design Contradiction:

Ease of manufactureVSDevice complexity

Solution Approach 1:

The patent enables the system to automatically calculate and determine element positions based on visual key position indicators placed on the canvas. Instead of requiring developers to manually calculate positions for multiple elements, the system self-determines the animation parameters from the visual arrangement, greatly simplifying the creation process and reducing procedural complexity.

Inventive Principle:

Principle #25Self-service

Solution Approach 2:

The patent introduces key position indicators as intermediary visual markers on the canvas that mediate between user intent and animation implementation. These indicators serve as a visual language that automatically translates into code, eliminating the need for developers to manually code complex position calculations for multiple elements and reducing overall process complexity.

Inventive Principle:

Principle #24Intermediary (Mediator)

3Ease of operation

If developers use code-based approaches to create scroll-triggered animation, then the animation functionality is achieved, but the ease of operation decreases due to lack of visual observation and testing

Engineering Contradiction:

Improveease of creating and editing animationVSAvoidlack of visual feedback during creation

Core Design Contradiction:

Ease of operationVSLoss of information

Solution Approach 1:

The patent adds a visual dimension to the animation creation process by displaying the animation preview and key positions on a canvas alongside the document. This visual dimension allows users to observe and test scroll-triggered animations in real-time during creation, providing immediate visual feedback that was previously only available after code execution, thereby improving ease of operation and preventing information loss.

Inventive Principle:

Principle #17Another dimension (Dimensionality change)

Data Source

PatentUS10373363B2Systems and methods for visually creating and editing scrolling actions

Publication Date: 2019.08.06 ADOBE INC

AI summary

Systems and methods for visually creating scroll-triggered animation in a document. Based on input received, a key position is determined that is associated with an element that is to be animated. An indicator may be displayed to visually show the location of the key position on an editing canvas. A scroll-triggered animation is defined for the element based on the specified key position. The scroll-triggered animation defines attributes of the element during scroll of the document in the end use environment. For example, the animation may specify that the element has a particular location when the scroll is at the specified key position. The scroll-triggered animation may additionally or alternatively comprise a before-effect and an after-effect, performing one animation before the scroll reaches the key position and another animation after the scroll reaches the key position.