Repository navigation
Conversation
AudioLines, Bot, Eye, MessageCircleMore and MessageSquareMore drive their animation with requestAnimationFrame, started only from the mouseenter handler, so a parent-set animate prop did nothing. In Bot and the two message icons the guard also tested the animate union, which meant a parent holding animate=true blocked the hover path as well. Each icon now triggers its animation from the prop via an untracked effect (untrack keeps the effect depending on the prop alone, not on the frame state it reads), and the single-flight guards test the in-flight flag instead of the union. AudioLines, which loops continuously, starts and settles the loop from the prop and no longer settles back on mouseleave while the prop still asks for animation. Two tests cover the whole set: every icon must render differently when animate is set, and every icon with a requestAnimationFrame loop must move geometry (not just toggle a class - AudioLines and Bot toggle a class with no CSS rule behind it, which is why this looked wired up) both from the prop and on hover. Fixes #99
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
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
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.
Fixes #99.
Problem
Five icons drive their animation with
requestAnimationFrame, started onlyfrom the
mouseenterhandler, so a parent-setanimateprop did nothing:AudioLines,Bot,Eye,MessageCircleMore,MessageSquareMore. InBotand the two message icons the single-flight guard also tested theanimateunion, so a parent holdinganimate={true}blocked the hover pathas well.
AudioLinesandBottoggle a class that has no CSS rule behindit, which is why they looked wired up while doing nothing at all.
Only AudioLines was reported; the other four have the same defect. The
sliders pair was already fixed earlier and is untouched here.
Technical changes
untrackkeeps the effect depending on the prop alone, not on the frame state the
handlers read, which would otherwise re-fire it every frame
animateunion, so a held prop no longer blocks hoverAudioLines(continuous loop) starts and settles its loop from the prop,and no longer settles back on
mouseleavewhile the prop still asks foranimation
animateisset, and every icon with a
requestAnimationFrameloop must movegeometry (not just toggle a class) both from the prop and on hover
Notes
the broken code, because a toggled class changes the markup even when no
CSS backs it. Verified the geometry test fails on all five icons before
the fix and passes after
requestAnimationFrame), so a future rAF icon is held to the samestandard automatically
circle-alert,frameandshield-alertalso toggle a class with no CSSrule, but they animate through inline styles and are not broken; cleaning
up those dead toggles is left out of this fix