haltu/muuri

Animate only the items that are in the viewport

Open

#398 opened on Jul 2, 2020

View on GitHub
 (4 comments) (0 reactions) (0 assignees)JavaScript (10,630 stars) (668 forks)batch import
enhancementhelp wanted

Description

After benchmarking the latest v0.9.0 release I've noticed that when you start the animation for hundreds of items there is a noticeable dip in fps. As the animations run in another thread (thanks to Web Animations API) they do run smoothly as long as they are not manipulated via the DOM in any way, but the pain points are starting the animations and stopping the animations.

So I was thinking how to make this process faster and the logical thing that came to my mind was windowing, as in animating only the visible items (in the viewport) and just instantly snapping the items outside the viewport. As a matter of fact, this is how Muuri worked in the early days out of the box, but I dropped that optimization somewhere down the road.

The optimization would be applied to both visibility and layout animations. And also, if an item is moved into viewport with animation and starts off outside the viewport it would be animated also. I have a working version of this optimization in a private branch and it's working pretty nicely, laying the foundation for full virtualization support and providing a noticeable boost in perf with hundreds of items. I'm just wondering if the optimization should be optional or not 🤔

If you have any ideas/opinions on how to best fit this optimization into Muuri please do share your thoughts 🙏

Contributor guide

Tech stack
javascript
Domain
frontendperformance
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
JavaScriptDOM API
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
The issue proposes optimizing animations by only animating items within the viewport (windowing). The maintainer mentions having a working private branch. To contribute, review the current animation logic in the Muuri source code, particularly the ` animate` and ` refresh` methods, and explore how to integrate windowing without breaking existing functionality. Consider the discussion in the comments about making it optional or default.