FE-204: Improve Transitions and Arcs animation #8262
Merged
Conversation
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
github-actions
bot
added
area/libs
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
Collaborator
Author
This stack of pull requests is managed by Graphite. Learn more about stacking. |
3 tasks
kube
force-pushed
the
cf/h-5982-improve-transition-animation
branch
from
37e2c1d to
2f206d0
Compare
kube
changed the base branch from
cf/petrinaut-remove-zustand
to
graphite-base/8262
kube
force-pushed
the
cf/h-5982-improve-transition-animation
branch
from
2f206d0 to
0195f48
Compare
kube
force-pushed
the
graphite-base/8262
branch
from
3e498ec to
bc88dae
Compare
kube
changed the base branch from
graphite-base/8262
to
cf/petrinaut-remove-zustand
kube
commented
Jan 19, 2026
libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-firing-delta.ts
Outdated
Show resolved
Hide resolved
kube
changed the base branch from
cf/petrinaut-remove-zustand
to
graphite-base/8262
kube
force-pushed
the
cf/h-5982-improve-transition-animation
branch
from
26b3b2b to
c56dfe9
Compare
kube
force-pushed
the
graphite-base/8262
branch
from
bc88dae to
bd38d6a
Compare
kube
changed the base branch from
graphite-base/8262
to
cf/petrinaut-remove-zustand
vilkinsons
changed the title
PlaceNode inside SDCPNView
…roduced useFiringAnimation hook for smoother animations, updated transition styles, and removed deprecated fired state handling.
…roperties to use consistent naming (`timeSinceLastFiringMs` and `firedInThisFrame`). Adjusted related tests and components to reflect these changes, ensuring accurate simulation behavior and improved clarity in the codebase.
… module. Removed redundant type definitions from the simulator module and re-exported necessary types for improved organization and clarity. Added detailed comments to enhance understanding of simulation structures.
kube
force-pushed
the
cf/h-5982-improve-transition-animation
branch
from
2f64eb0 to
5518ca8
Compare
When the component mounts while viewing a later frame, the previous firingCount ref is null. Previously this defaulted to 0, causing a large delta and triggering a fake firing animation. Now we treat null ref as "no delta" and also ignore negative deltas when scrubbing backwards. Co-Authored-By: Claude Opus 4.5 <[email protected]>
Using a raw <path> instead of BaseEdge drops ReactFlow's built-in edge interaction handling (e.g., wider hitbox via interactionWidth), making arcs harder to select/hover. Now using BaseEdge for the interactive path and keeping the animated overlay path layered on top. Co-Authored-By: Claude Opus 4.5 <[email protected]>
CiaranMn
approved these changes
Jan 22, 2026
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.
Simple strokeWidth animation
Kapture.2026-01-19.at.02.37.27.mp4
🌟 What is the purpose of this PR?
Because we do not necessarily show all frames during Playback, we possibly skip the frames where transitions happen, and no transition animation is shown to the user.
This PR solves that by not relying on the current frame only (check if current frames fires a given transition), but instead relying a count of transitions since previous frame.
Arc Animation
This PR leverages the same idea to show a "flow" inside arcs when their linked transition fired.
Because a transition firing is a discrete event (not even happening inside one frame, but between two), we display an animation for a certain amount of time to make it clear to the user that something happened in it.
But because an other firing can happen during the animation of a previous one, we cumulate the remaining of animations so the arc width increases to reflect this accumulation.
Other fixes
PlaceNodeinsideSDCPNViewPre-Merge Checklist 🚀
🚢 Has this modified a publishable library?
This PR:
📜 Does this require a change to the docs?
The changes in this PR:
🕸️ Does this require a change to the Turbo Graph?
The changes in this PR:
🐾 Next steps
This is just a first step in animating the "flow" inside the Arcs and Transitions.
Many better animations are possible, we'll iterate on that later to make it better.