Browser Sidebar Animation Using Snapshot Layers
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Web browsers struggle to smoothly animate web page content resizing, particularly when sidebars open or close, due to the inability to re-layout content quickly enough, resulting in visual jitter and inefficient use of page space.
Innovation Solution
A browser application uses snapshot layers to simulate a 60 frames per second re-layout by shifting and fading snapshot layers to create a seamless animation of sidebar opening or closing, aligning sidebar portions with dominant page portions to maintain a smooth visual experience.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Stability of the object's composition
If the browser engine attempts to re-layout content continuously at 60 frames per second during sidebar animation, then the animation smoothness is improved, but the processing speed and performance deteriorate due to the complexity of re-wrapping text and repositioning images
Solution Approach 1:
The patent creates a snapshot (copy) of the web page content before sidebar animation and displays this snapshot during the animation. The snapshot is moved using a graphics processing unit to simulate the effect of continuous re-layout without actually performing the complex text re-wrapping and image repositioning operations at 60 frames per second. This copying approach maintains animation smoothness while preserving browser rendering speed.
2Productivity
If the browser uses discrete location updates for sidebar positioning, then the processing load is reduced, but visual jitter occurs due to the jumping appearance between positions
Solution Approach 1:
The patent introduces a snapshot as an intermediary element between the original web page content and the sidebar animation. The snapshot is moved continuously using a graphics processing unit to bridge the discrete position updates, creating a smooth visual transition. This intermediary approach maintains rendering efficiency while eliminating visual jitter by providing continuous visual feedback during the animation.
3Device complexity
If the dominant page portion is not repositioned during sidebar animation, then the layout simplicity is maintained, but the sidebar cannot be displayed without overlapping or leaving vacant space
Solution Approach 1:
The patent creates a snapshot copy of the dominant page portion and moves this copy during sidebar animation rather than moving the actual content. This approach maintains layout simplicity by avoiding complex re-positioning of the original content while still achieving proper sidebar display quality. The snapshot serves as a visual placeholder that can be moved independently without affecting the underlying page structure.
Data Source
AI summary
The embodiments disclosed herein describe ways that a browser application can smoothly animate changing (i.e., decreasing, increasing) web page content width upon opening or closing of a sidebar. Methods include the browser analyzing the web page layout to identify a dominant page portion or to determine whether a centered portion layout exists, temporarily obscuring the web page with a snapshot of the page, identifying the location and size of the dominant or centered portion on the web page, and using the information to make changes to the web page in a layer hidden behind the snapshot.