feat(handlebars): Add drag-end animation with spring configuration#332
feat(handlebars): Add drag-end animation with spring configuration#332ChinmayNoob wants to merge 1 commit into
Conversation
👷 Deploy request for appcut pending review.Visit the deploys page to approve it
|
|
@ChinmayNoob is attempting to deploy a commit to the OpenCut OSS Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Handlebars Component
User->>Handlebars Component: Start Drag Handle
Handlebars Component->>Handlebars Component: set isDragging = true
User->>Handlebars Component: Drag Handle (move)
Handlebars Component->>Handlebars Component: Update handle position directly
User->>Handlebars Component: End Drag
Handlebars Component->>Handlebars Component: set isDragging = false
Handlebars Component->>Handlebars Component: Animate handles to default with spring
Possibly related PRs
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/web/src/components/landing/handlebars.tsx (2)
37-44: Consider consolidating spring configurations for consistency.The
springConfigobject is well-defined, but there are inconsistent spring parameters used in the drag-end animation (lines 49-53, 56-60) versus the handle transitions. Consider using the same configuration throughout for consistent animation feel.- animate(leftHandleX, 0, { - type: "spring", - stiffness: 300, - damping: 30, - mass: 1 - }); + animate(leftHandleX, 0, springConfig); - animate(rightHandleX, contentWidth, { - type: "spring", - stiffness: 300, - damping: 30, - mass: 1 - }); + animate(rightHandleX, contentWidth, springConfig);
46-65: Consider timing of state updates and optimize dependencies.The drag-end animation logic is sound, but there are two potential improvements:
State update timing: The state updates happen immediately when animation starts, not when it completes. This could cause issues if other components depend on these values during animation.
Unnecessary dependencies: Motion values
leftHandleXandrightHandleXdon't trigger re-renders, so they may not be needed in the dependency array.Consider updating state when animation completes:
useEffect(() => { if (!isDragging) { - animate(leftHandleX, 0, { + animate(leftHandleX, 0, { type: "spring", stiffness: 300, damping: 30, mass: 1 - }); + }).then(() => setLeftHandle(0)); - animate(rightHandleX, contentWidth, { + animate(rightHandleX, contentWidth, { type: "spring", stiffness: 300, damping: 30, mass: 1 - }); + }).then(() => setRightHandle(contentWidth)); - setLeftHandle(0); - setRightHandle(contentWidth); } -}, [isDragging, contentWidth, leftHandleX, rightHandleX]); +}, [isDragging, contentWidth]);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/src/components/landing/handlebars.tsx(8 hunks)
🧰 Additional context used
🧠 Learnings (1)
apps/web/src/components/landing/handlebars.tsx (1)
Learnt from: simonorzel26
PR: OpenCut-app/OpenCut#324
File: apps/web/src/components/editor/snap-indicator.tsx:43-43
Timestamp: 2025-07-17T08:26:10.929Z
Learning: In the timeline refactor PR #324, the snap indicator component in apps/web/src/components/editor/snap-indicator.tsx requires the hard-coded `ml-48` class in addition to the calculated `leftPosition` for proper alignment. This is intentional and needed for the new timeline layout.
🔇 Additional comments (6)
apps/web/src/components/landing/handlebars.tsx (6)
4-4: LGTM: Import addition is correct and necessary.The
animateimport is properly added and required for the programmatic spring animations in the drag end functionality.
22-22: LGTM: State management for drag tracking is well-implemented.The
isDraggingstate properly tracks the drag state to prevent conflicts between manual dragging and automatic spring animations.
87-96: LGTM: Conditional motion value updates prevent animation conflicts.The addition of
isDraggingguards in both useEffect hooks is excellent. This prevents the motion values from being overridden during the spring animation, ensuring smooth reset animations without conflicts.
103-103: LGTM: Drag state tracking is properly implemented.The addition of
setIsDragging(true)in both drag handlers correctly marks the beginning of drag operations, enabling proper state management for the animation system.Also applies to: 112-112
120-122: LGTM: Drag end handler is clean and effective.The
handleDragEndfunction properly marks the end of drag operations, triggering the spring animation system through the state change.
152-152: LGTM: Consistent animation configuration across components.The addition of
onDragEnd={handleDragEnd}to both handles and the consistent use ofspringConfigfor transitions creates a cohesive animation experience. This properly integrates the drag-end functionality with the handle interactions.Also applies to: 155-155, 176-176, 179-179, 200-200
|
It looks cool, but it doesn’t really fit the vibe of video editing. You’re not trimming it right here. |
|
Are there any modifications that you can suggest which i can try on this component or is it better to let it be just like how it is One change i can suggest is how the clips of this components are, we can do it like it is done in all the softwares 2025-07-17.22-09-10.mp4Otherwise if you are ok with how the component is we can close this pr |
|
Hey @ChinmayNoob, I think the current one looks better and fits the vibe. But if you find something that matches the editor vibe even better, go for it! |
2 participants
Demo
opencut.mp4
Description
This PR enhances the Handlebars component by adding drag-end animation functionality. When users release the handles after dragging, they smoothly animate back to their original positions using spring animations, creating a more polished and interactive user experience.
Motivation: Improve the user interaction feedback and make the component feel more dynamic and responsive.
Type of change
How Has This Been Tested?
I have tested the following scenarios:
Test Configuration:
Checklist:
Additional context
The animation is implemented using Framer Motion's spring configuration, which can be easily adjusted through the
springConfigobject if we need to modify the animation feel. The changes maintain the original styling and dimensions while adding this new interactive feature.Key changes:
Summary by CodeRabbit
New Features
Bug Fixes