Skip to content

Conversation

diagramatics
Copy link
Contributor

Continuing from #385. Sorry for the hijack @STRML I was going to force push to the PR branch instead but I realised it's on a separate repo 😢

When animating a large number of elements, it can be helpful to batch these animations up into a single mutate operation using fastdom to improve forced synchronous layout stalls.

This PR fixes the enter animations by running the class mutation for enter on the event handler, skipping fastdom and only relying it on the -active class. The difference is on instead of recalculating the DOM by forcefully invalidating it on every animation, the recalculation happens at the end of the frame per the browser logic. This is huge for animations where more than one element is being animated at the same frame. Results are on the flamecharts below on the TransitionGroup story when set to animate 3 elements at once.

Before:

image
Notice the expensive style recalculation and relayouts on every animation done.

After:
image

PR also fixes the missing webpack-atoms dependency to run Storybook.

Copy link
Contributor

@STRML STRML left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call on the immediate flag, just a lot of noise from webpack-atoms here

"loose-envify": "^1.4.0",
"prop-types": "^15.6.2",
"fastdom": "^1.0.8"
"webpack-atoms": "^10.0.2"
Copy link
Contributor

@STRML STRML Apr 26, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Intended? This should be a separate PR

@diagramatics
Copy link
Contributor Author

Closing since #385 is updated now.

@diagramatics diagramatics deleted the feat/fastdom branch April 26, 2019 18:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants