chore: migrated from react-transition-group to framer-motion #339
Conversation
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
WalkthroughThis update migrates the animation and transition logic in several React components from Changes
Sequence Diagram(s)sequenceDiagram
participant UI as User Interface
participant FM as framer-motion
participant Component as React Component
UI->>Component: Trigger show/hide event
Component->>FM: Render with AnimatePresence/motion.div
FM-->>Component: Animate (initial → animate → exit)
Component-->>UI: Rendered with animated transition
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🔇 Additional comments (2)
✨ 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:
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 (
|
PR Reviewer Guide 🔍Here are some key observations to aid the review process:
|
PR Code Suggestions ✨Explore these optional code suggestions:
|
|||||||||
![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)
src/react/Title.tsx (1)
29-38: Consider removing unused mounted state.The
mountedstate doesn't appear to be used for rendering anymore since AnimatePresence now handles the mounting/unmounting of components. Consider removing this state and the associated useEffect to simplify the code.- const [mounted, setMounted] = useState(false) - useEffect(() => { - if (!mounted && (openTitle || openActionBar)) { - setMounted(true) - } - }, [openTitle, openActionBar])src/react/DiveTransition.tsx (1)
8-26: Consider simplifying mounting logic.There's redundancy between the manual mounting state management and AnimatePresence. Since AnimatePresence now handles the mounting/unmounting of components based on the
openprop, you could potentially simplify this code.Consider one of these approaches:
- If you need the delayed unmounting behavior:
- const [mounted, setMounted] = useState(false) + const [shouldRender, setShouldRender] = useState(false) useEffect(() => { - if (!mounted && open) { - setMounted(true) + if (open) { + setShouldRender(true) } let timeout - if (mounted && !open) { + if (!open && shouldRender) { timeout = setTimeout(() => { - setMounted(false) + setShouldRender(false) }, durationInMs) } return () => { if (timeout) clearTimeout(timeout) } }, [open]) - if (!mounted) return null + return ( + shouldRender ? ( + <AnimatePresence>
- Or completely rely on AnimatePresence:
- const [mounted, setMounted] = useState(false) - - useEffect(() => { - if (!mounted && open) { - setMounted(true) - } - let timeout - if (mounted && !open) { - timeout = setTimeout(() => { - setMounted(false) - }, durationInMs) - } - return () => { - if (timeout) clearTimeout(timeout) - } - }, [open]) - - if (!mounted) return null return ( <AnimatePresence> {open && (
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (7)
package.json(2 hunks)src/react/DiveTransition.tsx(3 hunks)src/react/HotbarRenderApp.tsx(3 hunks)src/react/MainMenuRenderApp.tsx(2 hunks)src/react/Notification.tsx(3 hunks)src/react/Title.css(1 hunks)src/react/Title.tsx(3 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/react/Title.tsx (1)
src/react/TitleProvider.tsx (1)
title(33-157)
src/react/MainMenuRenderApp.tsx (3)
src/globalState.ts (2)
showModal(42-47)openOptionsMenu(91-93)src/utils.ts (1)
openGithub(162-164)src/browserfs.ts (2)
openWorldDirectory(301-345)openFilePicker(632-672)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build-and-deploy
🔇 Additional comments (19)
src/react/Title.css (1)
35-35: Class name updated to follow new naming convention.The class name has been changed from
.action-barto.message-action-bar, which better describes its purpose and aligns with the changes in the corresponding TSX files that now use framer-motion for animations.package.json (1)
80-80: Added framer-motion dependency.The addition of framer-motion (v12.9.2) is appropriate for the migration from react-transition-group. This is a modern animation library with a more declarative API.
Note: I can see that
react-transition-groupand@types/react-transition-groupdependencies have been removed (not visible in the diff), which is the correct approach to avoid keeping unused dependencies.src/react/HotbarRenderApp.tsx (3)
2-2: Imported framer-motion components.Correctly importing the required components from framer-motion for the animation migration.
20-20: Duration format changed to seconds.The animation duration has been changed from milliseconds (300) to seconds (0.3) to align with framer-motion's API, which uses seconds instead of milliseconds.
54-71: Successfully migrated to framer-motion animation API.The component has been refactored to use framer-motion's more declarative animation API. This implementation:
- Uses
AnimatePresenceto handle the mounting/unmounting animations- Replaces manual state handling with declarative
initial,animate, andexitprops- Properly maintains the same animation duration and behavior
The code is now more readable and follows modern React animation patterns.
src/react/MainMenuRenderApp.tsx (2)
2-2: Imported framer-motion components.Correctly importing the required components from framer-motion for the animation migration.
120-163: Successfully migrated to framer-motion animation API.The component has been refactored to use framer-motion's declarative animation API:
- Uses
AnimatePresenceto properly handle mount/unmount animations- Implements
motion.divwith appropriate animation props- Maintains the conditional rendering logic while adding proper exit animations
- Includes an optimization to disable animations when appropriate (line 128)
- Adds easing configuration (
ease: 'easeInOut') for smoother transitionsThis implementation is cleaner and more maintainable than the previous react-transition-group approach.
src/react/Title.tsx (5)
2-2: Library import correctly replaced.The import of
motionandAnimatePresencefromframer-motionaligns with the PR's objective to migrate from react-transition-group.
31-32: Animation durations correctly defined in seconds.The default durations are now properly defined in seconds (0.5s and 1s) as expected by framer-motion, rather than milliseconds used by react-transition-group.
42-61: Title animation implementation looks good.The implementation correctly uses
AnimatePresencewith conditional rendering and appropriate motion.div properties. The conversion from milliseconds to seconds in the transition timing is properly handled.
62-78: Action bar animation implementation looks good.Similar to the title animation, the action bar implementation correctly uses
AnimatePresencewith proper motion properties and timing conversions.
73-73: CSS class name updated for consistency.The class name has been updated from 'action-bar' to 'message-action-bar' to reflect updated styling conventions.
src/react/Notification.tsx (4)
1-1: Library import correctly replaced.The import of
motionandAnimatePresencefromframer-motionaligns with the PR's objective to migrate from react-transition-group.
4-4: Animation duration properly defined in seconds.The duration is now correctly defined as 0.2 seconds instead of milliseconds, as required by framer-motion.
12-59: Notification animation implementation looks good.The implementation correctly uses
AnimatePresencewith conditional rendering based on theopenprop. The animation transitions (sliding in from bottom, sliding out to top) are well-defined with appropriate opacity and y-axis translations.
34-34: Pointer events logic improved.The pointer events style now explicitly uses 'auto' when an action is provided and 'none' otherwise, which is clearer than the previous implementation that used an empty string fallback.
src/react/DiveTransition.tsx (3)
2-2: Library import correctly replaced.The import of
motionandAnimatePresencefromframer-motionaligns with the PR's objective to migrate from react-transition-group.
5-6: Duration properly defined for both animation and timeout.The duration is correctly defined in seconds for framer-motion (0.3s) and converted to milliseconds (300ms) for the timeout function, maintaining consistency.
28-44: Dive transition animation implementation looks good.The implementation correctly uses
AnimatePresencewith conditional rendering and appropriate motion.div properties, animating both opacity and z-axis translation.
|
/deploy |
|
Deployed to Vercel Preview: https://prismarine-3ee4v7yp5-zaro.vercel.app |
|
/deploy |
|
Deployed to Vercel Preview: https://prismarine-dgx9ya5tq-zaro.vercel.app |
|
/deploy |
|
Deployed to Vercel Preview: https://prismarine-hnnk89lk2-zaro.vercel.app |
PR Type
Enhancement
Description
Migrated all UI transitions from
react-transition-grouptoframer-motionframer-motion'smotionandAnimatePresenceRemoved
react-transition-groupand its types from dependenciesAdded
framer-motionas a new dependencyMinor CSS class renaming for consistency
Changes walkthrough 📝
2 files
Replace react-transition-group with framer-motion in dependenciesUpdate lockfile for framer-motion and dependency changes5 files
Refactor dive transition to use framer-motionUse framer-motion for item name fade animationSwitch main menu transition to framer-motionRefactor notification slide animation to framer-motionUse framer-motion for title and action bar fade transitions1 files
Rename .action-bar to .message-action-bar for claritySummary by CodeRabbit