Adding requestAnimationFrame() to scroll sniffing for better perf#1828
Merged
HardeepAsrani merged 1 commit intoCodeinwp:developmentfrom Aug 31, 2023
Merged
Adding requestAnimationFrame() to scroll sniffing for better perf#1828HardeepAsrani merged 1 commit intoCodeinwp:developmentfrom
HardeepAsrani merged 1 commit intoCodeinwp:developmentfrom
Conversation
Contributor
|
Everything is ok. Tested with Chrome, Vivaldi, Firefox, and Safari. Test blocks: <!-- wp:themeisle-blocks/circle-counter {"id":"wp-block-themeisle-blocks-circle-counter-636dab1a","className":"animated rollIn delay-1s slower"} -->
<div id="wp-block-themeisle-blocks-circle-counter-636dab1a" data-percentage="50" data-duration="2" data-height="100" data-stroke-width="10" class="wp-block-themeisle-blocks-circle-counter animated rollIn delay-1s slower"><div class="wp-block-themeisle-blocks-circle-counter-title__area"><span class="wp-block-themeisle-blocks-circle-counter-title__value">Skill</span></div><div class="wp-block-themeisle-blocks-circle-counter__bar"></div></div>
<!-- /wp:themeisle-blocks/circle-counter -->
<!-- wp:themeisle-blocks/circle-counter {"id":"wp-block-themeisle-blocks-circle-counter-f925f2c0","className":"animated rollIn delay-1s slower"} -->
<div id="wp-block-themeisle-blocks-circle-counter-f925f2c0" data-percentage="50" data-duration="2" data-height="100" data-stroke-width="10" class="wp-block-themeisle-blocks-circle-counter animated rollIn delay-1s slower"><div class="wp-block-themeisle-blocks-circle-counter-title__area"><span class="wp-block-themeisle-blocks-circle-counter-title__value">Skill</span></div><div class="wp-block-themeisle-blocks-circle-counter__bar"></div></div>
<!-- /wp:themeisle-blocks/circle-counter -->
<!-- wp:spacer {"height":"407px"} -->
<div style="height:407px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:themeisle-blocks/circle-counter {"id":"wp-block-themeisle-blocks-circle-counter-8a4b5137","className":"animated rollIn delay-1s slower"} -->
<div id="wp-block-themeisle-blocks-circle-counter-8a4b5137" data-percentage="50" data-duration="2" data-height="100" data-stroke-width="10" class="wp-block-themeisle-blocks-circle-counter animated rollIn delay-1s slower"><div class="wp-block-themeisle-blocks-circle-counter-title__area"><span class="wp-block-themeisle-blocks-circle-counter-title__value">Skill</span></div><div class="wp-block-themeisle-blocks-circle-counter__bar"></div></div>
<!-- /wp:themeisle-blocks/circle-counter -->
<!-- wp:themeisle-blocks/circle-counter {"id":"wp-block-themeisle-blocks-circle-counter-23e08039","className":"animated slideInRight delay-1s slower"} -->
<div id="wp-block-themeisle-blocks-circle-counter-23e08039" data-percentage="50" data-duration="2" data-height="100" data-stroke-width="10" class="wp-block-themeisle-blocks-circle-counter animated slideInRight delay-1s slower"><div class="wp-block-themeisle-blocks-circle-counter-title__area"><span class="wp-block-themeisle-blocks-circle-counter-title__value">Skill</span></div><div class="wp-block-themeisle-blocks-circle-counter__bar"></div></div>
<!-- /wp:themeisle-blocks/circle-counter -->
<!-- wp:themeisle-blocks/circle-counter {"id":"wp-block-themeisle-blocks-circle-counter-66251391","className":"animated slideInDown delay-200ms faster"} -->
<div id="wp-block-themeisle-blocks-circle-counter-66251391" data-percentage="50" data-duration="2" data-height="100" data-stroke-width="10" class="wp-block-themeisle-blocks-circle-counter animated slideInDown delay-200ms faster"><div class="wp-block-themeisle-blocks-circle-counter-title__area"><span class="wp-block-themeisle-blocks-circle-counter-title__value">Skill</span></div><div class="wp-block-themeisle-blocks-circle-counter__bar"></div></div>
<!-- /wp:themeisle-blocks/circle-counter -->
<!-- wp:themeisle-blocks/circle-counter {"id":"wp-block-themeisle-blocks-circle-counter-1b1d1ca3","className":"animated slideInUp delay-200ms faster"} -->
<div id="wp-block-themeisle-blocks-circle-counter-1b1d1ca3" data-percentage="50" data-duration="2" data-height="100" data-stroke-width="10" class="wp-block-themeisle-blocks-circle-counter animated slideInUp delay-200ms faster"><div class="wp-block-themeisle-blocks-circle-counter-title__area"><span class="wp-block-themeisle-blocks-circle-counter-title__value">Skill</span></div><div class="wp-block-themeisle-blocks-circle-counter__bar"></div></div>
<!-- /wp:themeisle-blocks/circle-counter -->
<!-- wp:themeisle-blocks/circle-counter {"id":"wp-block-themeisle-blocks-circle-counter-54835b6e","className":"animated bounceInRight delay-200ms faster"} -->
<div id="wp-block-themeisle-blocks-circle-counter-54835b6e" data-percentage="50" data-duration="2" data-height="100" data-stroke-width="10" class="wp-block-themeisle-blocks-circle-counter animated bounceInRight delay-200ms faster"><div class="wp-block-themeisle-blocks-circle-counter-title__area"><span class="wp-block-themeisle-blocks-circle-counter-title__value">Skill</span></div><div class="wp-block-themeisle-blocks-circle-counter__bar"></div></div>
<!-- /wp:themeisle-blocks/circle-counter -->
<!-- wp:themeisle-blocks/circle-counter {"id":"wp-block-themeisle-blocks-circle-counter-2b219f3a","className":"animated bounceInDown delay-200ms faster"} -->
<div id="wp-block-themeisle-blocks-circle-counter-2b219f3a" data-percentage="50" data-duration="2" data-height="100" data-stroke-width="10" class="wp-block-themeisle-blocks-circle-counter animated bounceInDown delay-200ms faster"><div class="wp-block-themeisle-blocks-circle-counter-title__area"><span class="wp-block-themeisle-blocks-circle-counter-title__value">Skill</span></div><div class="wp-block-themeisle-blocks-circle-counter__bar"></div></div>
<!-- /wp:themeisle-blocks/circle-counter -->
<!-- wp:themeisle-blocks/circle-counter {"id":"wp-block-themeisle-blocks-circle-counter-e5648e54","className":"animated rotateIn delay-200ms faster"} -->
<div id="wp-block-themeisle-blocks-circle-counter-e5648e54" data-percentage="50" data-duration="2" data-height="100" data-stroke-width="10" class="wp-block-themeisle-blocks-circle-counter animated rotateIn delay-200ms faster"><div class="wp-block-themeisle-blocks-circle-counter-title__area"><span class="wp-block-themeisle-blocks-circle-counter-title__value">Skill</span></div><div class="wp-block-themeisle-blocks-circle-counter__bar"></div></div>
<!-- /wp:themeisle-blocks/circle-counter -->
<!-- wp:themeisle-blocks/circle-counter {"id":"wp-block-themeisle-blocks-circle-counter-8ee1e7a1","className":"animated swing delay-1s slow"} -->
<div id="wp-block-themeisle-blocks-circle-counter-8ee1e7a1" data-percentage="50" data-duration="2" data-height="100" data-stroke-width="10" class="wp-block-themeisle-blocks-circle-counter animated swing delay-1s slow"><div class="wp-block-themeisle-blocks-circle-counter-title__area"><span class="wp-block-themeisle-blocks-circle-counter-title__value">Skill</span></div><div class="wp-block-themeisle-blocks-circle-counter__bar"></div></div>
<!-- /wp:themeisle-blocks/circle-counter -->
<!-- wp:themeisle-blocks/circle-counter {"id":"wp-block-themeisle-blocks-circle-counter-fd8e6202","className":"animated jackInTheBox delay-200ms slow"} -->
<div id="wp-block-themeisle-blocks-circle-counter-fd8e6202" data-percentage="50" data-duration="2" data-height="100" data-stroke-width="10" class="wp-block-themeisle-blocks-circle-counter animated jackInTheBox delay-200ms slow"><div class="wp-block-themeisle-blocks-circle-counter-title__area"><span class="wp-block-themeisle-blocks-circle-counter-title__value">Skill</span></div><div class="wp-block-themeisle-blocks-circle-counter__bar"></div></div>
<!-- /wp:themeisle-blocks/circle-counter --> |
Soare-Robert-Daniel
approved these changes
Aug 25, 2023
Contributor
|
@Soare-Robert-Daniel Can you please help me with the zip build for this PR? |
Contributor
|
@Soare-Robert-Daniel Tested and everything's fine on my end 🚀 Thank you @rtvenge 🙏 |
Contributor
|
🎉 This PR is included in version 2.4.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes Issue: (n/a)
Summary
Added
requestAnimationFrame()API to scroll sniffing for better performance. Source: https://css-tricks.com/using-requestanimationframe/Edit by Hardeep: Details: https://wordpress.org/support/topic/performance-feature-request/#post-16998512
Screenshots
Test instructions
onLoad.Checklist before the final review
See WordPress.org Support Thread for full context.
Please let me know if there are