Update animations

package.json

@@ -11,12 +11,12 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "3.5.1",
+    "framer-motion": "^11.2.12",
     "react": "^18.3.1",
     "react-bootstrap": "^2.2.2",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-slider": "^2.0.6",
-    "react-transition-group": "^4.4.5",
     "react-youtube": "^7.13.1",
     "use-between": "^1.3.5"
   },

src/common/index.ts

@@ -18,6 +18,5 @@ export * from './classNames';
 export * from './draggable-window';
 export * from './layout';
 export * from './layout/limited-edition';
-export * from './transitions';
 export * from './types';
 export * from './utils';

src/common/layout/LayoutNotificationBubbleView.tsx

@@ -1,6 +1,6 @@
+import { AnimatePresence, motion } from 'framer-motion';
 import { FC, useEffect, useMemo, useState } from 'react';
 import { Flex, FlexProps } from '../Flex';
-import { TransitionAnimation, TransitionAnimationTypes } from '../transitions';
 
 export interface LayoutNotificationBubbleViewProps extends FlexProps
 {
@@ -45,8 +45,14 @@ export const LayoutNotificationBubbleView: FC<LayoutNotificationBubbleViewProps>
     }, [ fadesOut, timeoutMs, onClose ]);
 
     return (
-        <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isVisible } timeout={ 300 }>
+        <AnimatePresence>
-            <Flex overflow={ overflow } classNames={ getClassNames } onClick={ onClose } { ...rest } />
+            { isVisible &&
-        </TransitionAnimation>
+                <motion.div
+                    initial={ { opacity: 0 }}
+                    animate={ { opacity: 1 }}
+                    exit={ { opacity: 0 }}>
+                    <Flex overflow={ overflow } classNames={ getClassNames } onClick={ onClose } { ...rest } />
+                </motion.div> }
+        </AnimatePresence>
     );
 };

src/common/transitions/TransitionAnimation.tsx

@@ -1,49 +0,0 @@
-import { FC, ReactNode, useEffect, useState } from 'react';
-import { Transition } from 'react-transition-group';
-import { getTransitionAnimationStyle } from './TransitionAnimationStyles';
-
-export const TransitionAnimation: FC<{
-    type: string;
-    inProp: boolean;
-    timeout?: number;
-    className?: string;
-    children?: ReactNode;
-}> = props =>
-{
-    const { type = null, inProp = false, timeout = 300, className = null, children = null } = props;
-
-    const [ isChildrenVisible, setChildrenVisible ] = useState(false);
-
-    useEffect(() =>
-    {
-        let timeoutData: ReturnType<typeof setTimeout> = null;
-
-        if(inProp)
-        {
-            setChildrenVisible(true);
-        }
-        else
-        {
-            timeoutData = setTimeout(() =>
-            {
-                setChildrenVisible(false);
-                clearTimeout(timeout);
-            }, timeout);
-        }
-
-        return () =>
-        {
-            if(timeoutData) clearTimeout(timeoutData);
-        };
-    }, [ inProp, timeout ]);
-
-    return (
-        <Transition in={ inProp } timeout={ timeout }>
-            { state => (
-                <div className={ (className ?? '') + ' animate__animated' } style={ { ...getTransitionAnimationStyle(type, state, timeout) } }>
-                    { isChildrenVisible && children }
-                </div>
-            ) }
-        </Transition>
-    );
-};

src/common/transitions/TransitionAnimationStyles.ts

@@ -1,136 +0,0 @@
-import { CSSProperties } from 'react';
-import { TransitionStatus } from 'react-transition-group';
-import { ENTERING, EXITING } from 'react-transition-group/Transition';
-import { TransitionAnimationTypes } from './TransitionAnimationTypes';
-
-export function getTransitionAnimationStyle(type: string, transition: TransitionStatus, timeout: number = 300): Partial<CSSProperties>
-{
-    switch(type)
-    {
-        case TransitionAnimationTypes.BOUNCE:
-            switch(transition)
-            {
-                default:
-                    return {};
-                case ENTERING:
-                    return {
-                        animationName: 'bounceIn',
-                        animationDuration: `${ timeout }ms`
-                    };
-                case EXITING:
-                    return {
-                        animationName: 'bounceOut',
-                        animationDuration: `${ timeout }ms`
-                    };
-            }
-        case TransitionAnimationTypes.SLIDE_LEFT:
-            switch(transition)
-            {
-                default:
-                    return {};
-                case ENTERING:
-                    return {
-                        animationName: 'slideInLeft',
-                        animationDuration: `${ timeout }ms`
-                    };
-                case EXITING:
-                    return {
-                        animationName: 'slideOutLeft',
-                        animationDuration: `${ timeout }ms`
-                    };
-            }
-        case TransitionAnimationTypes.SLIDE_RIGHT:
-            switch(transition)
-            {
-                default:
-                    return {};
-                case ENTERING:
-                    return {
-                        animationName: 'slideInRight',
-                        animationDuration: `${ timeout }ms`
-                    };
-                case EXITING:
-                    return {
-                        animationName: 'slideOutRight',
-                        animationDuration: `${ timeout }ms`
-                    };
-            }
-        case TransitionAnimationTypes.FLIP_X:
-            switch(transition)
-            {
-                default:
-                    return {};
-                case ENTERING:
-                    return {
-                        animationName: 'flipInX',
-                        animationDuration: `${ timeout }ms`
-                    };
-                case EXITING:
-                    return {
-                        animationName: 'flipOutX',
-                        animationDuration: `${ timeout }ms`
-                    };
-            }
-        case TransitionAnimationTypes.FADE_UP:
-            switch(transition)
-            {
-                default:
-                    return {};
-                case ENTERING:
-                    return {
-                        animationName: 'fadeInUp',
-                        animationDuration: `${ timeout }ms`
-                    };
-                case EXITING:
-                    return {
-                        animationName: 'fadeOutDown',
-                        animationDuration: `${ timeout }ms`
-                    };
-            }
-        case TransitionAnimationTypes.FADE_IN:
-            switch(transition)
-            {
-                default:
-                    return {};
-                case ENTERING:
-                    return {
-                        animationName: 'fadeIn',
-                        animationDuration: `${ timeout }ms`
-                    };
-                case EXITING:
-                    return {
-                        animationName: 'fadeOut',
-                        animationDuration: `${ timeout }ms`
-                    };
-            }
-        case TransitionAnimationTypes.FADE_DOWN:
-            switch(transition)
-            {
-                default:
-                    return {};
-                case ENTERING:
-                    return {
-                        animationName: 'fadeInDown',
-                        animationDuration: `${ timeout }ms`
-                    };
-                case EXITING:
-                    return {
-                        animationName: 'fadeOutUp',
-                        animationDuration: `${ timeout }ms`
-                    };
-            }
-        case TransitionAnimationTypes.HEAD_SHAKE:
-            switch(transition)
-            {
-                default:
-                    return {};
-                case ENTERING:
-                    return {
-                        animationName: 'headShake',
-                        animationDuration: `${ timeout }ms`
-                    };
-            }
-    }
-
-    return null;
-}

src/common/transitions/TransitionAnimationTypes.ts

@@ -1,11 +0,0 @@
-export class TransitionAnimationTypes
-{
-    public static BOUNCE: string = 'bounce';
-    public static SLIDE_LEFT: string = 'slideLeft';
-    public static SLIDE_RIGHT: string = 'slideRight';
-    public static FLIP_X: string = 'flipX';
-    public static FADE_IN: string = 'fadeIn';
-    public static FADE_DOWN: string = 'fadeDown';
-    public static FADE_UP: string = 'fadeUp';
-    public static HEAD_SHAKE: string = 'headShake';
-}

src/common/transitions/index.ts

@@ -1,3 +0,0 @@
-export * from './TransitionAnimation';
-export * from './TransitionAnimationStyles';
-export * from './TransitionAnimationTypes';

src/components/main/MainView.tsx

@@ -1,6 +1,7 @@
 import { AddLinkEventTracker, GetCommunication, HabboWebTools, ILinkEventTracker, RemoveLinkEventTracker, RoomSessionEvent } from '@nitrots/nitro-renderer';
+import { AnimatePresence, motion } from 'framer-motion';
 import { FC, useEffect, useState } from 'react';
-import { Base, TransitionAnimation, TransitionAnimationTypes } from '../../common';
+import { Base } from '../../common';
 import { useNitroEvent } from '../../hooks';
 import { AchievementsView } from '../achievements/AchievementsView';
 import { AvatarEditorView } from '../avatar-editor';
@@ -80,9 +81,15 @@ export const MainView: FC<{}> = props =>
 
     return (
         <Base fit>
-            <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ landingViewVisible } timeout={ 300 }>
+            <AnimatePresence>
-                <HotelView />
+                { landingViewVisible &&
-            </TransitionAnimation>
+                    <motion.div
+                        initial={ { opacity: 0 }}
+                        animate={ { opacity: 1 }}
+                        exit={ { opacity: 0 }}>
+                        <HotelView />
+                    </motion.div> }
+            </AnimatePresence>
             <ToolbarView isInRoom={ !landingViewVisible } />
             <ModToolsView />
             <RoomView />

src/components/room/RoomView.tsx

@@ -1,7 +1,7 @@
-import { GetRenderer } from '@nitrots/nitro-renderer';
+import { GetRenderer, RoomSession } from '@nitrots/nitro-renderer';
+import { AnimatePresence, motion } from 'framer-motion';
 import { FC, useEffect, useRef } from 'react';
 import { DispatchMouseEvent, DispatchTouchEvent } from '../../api';
-import { Base } from '../../common';
 import { useRoom } from '../../hooks';
 import { RoomSpectatorView } from './spectator/RoomSpectatorView';
 import { RoomWidgetsView } from './widgets/RoomWidgetsView';
@@ -13,6 +13,8 @@ export const RoomView: FC<{}> = props =>
 
     useEffect(() =>
     {
+        if(!roomSession) return;
+
         const canvas = GetRenderer().canvas;
 
         if(!canvas) return;
@@ -32,15 +34,23 @@ export const RoomView: FC<{}> = props =>
         if(!element) return;
 
         element.appendChild(canvas);
-    }, []);
+    }, [ roomSession ]);
 
     return (
-        <Base fit innerRef={ elementRef } className={ (!roomSession && 'd-none') }>
+        <AnimatePresence>
-            { roomSession &&
+            { !!roomSession &&
-                <>
+                <motion.div
-                    <RoomWidgetsView />
+                    initial={ { opacity: 0 }}
-                    { roomSession.isSpectator && <RoomSpectatorView /> }
+                    animate={ { opacity: 1 }}
-                </> }
+                    exit={ { opacity: 0 }}>
-        </Base>
+                    <div ref={ elementRef } className="w-100 h-100">
+                        { roomSession instanceof RoomSession &&
+                            <>
+                                <RoomWidgetsView />
+                                { roomSession.isSpectator && <RoomSpectatorView /> }
+                            </> }
+                    </div>
+                </motion.div> }
+        </AnimatePresence>
     );
 };

src/components/room/widgets/furniture/FurnitureCraftingView.tsx

@@ -12,9 +12,10 @@ export const FurnitureCraftingView: FC<{}> = props =>
 
     const isOwner = useMemo(() =>
     {
+        if(!roomSession) return false;
         const roomObject = GetRoomEngine().getRoomObject(roomSession.roomId, objectId, RoomObjectCategory.FLOOR);
         return IsOwnerOfFurniture(roomObject);
-    }, [ objectId, roomSession.roomId ]);
+    }, [ objectId, roomSession ]);
 
     const canCraft = useMemo(() =>
     {

src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx

@@ -1,7 +1,8 @@
 import { CreateLinkEvent, GetGuestRoomResultEvent, GetRoomEngine, NavigatorSearchComposer, RateFlatMessageComposer } from '@nitrots/nitro-renderer';
+import { AnimatePresence, motion } from 'framer-motion';
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, SendMessageComposer } from '../../../../api';
-import { Base, Column, Flex, Text, TransitionAnimation, TransitionAnimationTypes, classNames } from '../../../../common';
+import { Base, Column, Flex, Text, classNames } from '../../../../common';
 import { useMessageEvent, useNavigator, useRoom } from '../../../../hooks';
 
 export const RoomToolsWidgetView: FC<{}> = props =>
@@ -80,20 +81,26 @@ export const RoomToolsWidgetView: FC<{}> = props =>
                     <Base pointer title={ LocalizeText('room.like.button.text') } onClick={ () => handleToolClick('like_room') } className="icon icon-like-room" /> }
             </Column>
             <Column justifyContent="center">
-                <TransitionAnimation type={ TransitionAnimationTypes.SLIDE_LEFT } inProp={ isOpen } timeout={ 300 }>
+                <AnimatePresence>
-                    <Column center>
+                    { isOpen &&
-                        <Column className="nitro-room-tools-info rounded py-2 px-3">
+                        <motion.div
-                            <Column gap={ 1 }>
+                            initial={ { x: -400 }}
-                                <Text wrap variant="white" fontSize={ 4 }>{ roomName }</Text>
+                            animate={ { x: 0 }}
-                                <Text variant="muted" fontSize={ 5 }>{ roomOwner }</Text>
+                            exit={ { x: -400 }}>
-                            </Column>
+                            <Column center>
-                            { roomTags && roomTags.length > 0 &&
+                                <Column className="nitro-room-tools-info rounded py-2 px-3">
+                                    <Column gap={ 1 }>
+                                        <Text wrap variant="white" fontSize={ 4 }>{ roomName }</Text>
+                                        <Text variant="muted" fontSize={ 5 }>{ roomOwner }</Text>
+                                    </Column>
+                                    { roomTags && roomTags.length > 0 &&
                                 <Flex gap={ 2 }>
                                     { roomTags.map((tag, index) => <Text key={ index } small pointer variant="white" className="rounded bg-primary p-1" onClick={ () => handleToolClick('navigator_search_tag', tag) }>#{ tag }</Text>) }
                                 </Flex> }
-                        </Column>
+                                </Column>
-                    </Column>
+                            </Column>
-                </TransitionAnimation>
+                        </motion.div> }
+                </AnimatePresence>
             </Column>
         </Flex>
     );

src/components/toolbar/ToolbarMeView.tsx

@@ -4,14 +4,11 @@ import { DispatchUiEvent, GetConfigurationValue, GetRoomSession, GetUserProfile
 import { Base, Flex, LayoutItemCountView } from '../../common';
 import { GuideToolEvent } from '../../events';
 
-interface ToolbarMeViewProps
+export const ToolbarMeView: FC<PropsWithChildren<{
-{
     useGuideTool: boolean;
     unseenAchievementCount: number;
     setMeExpanded: Dispatch<SetStateAction<boolean>>;
-}
+}>> = props =>
-
-export const ToolbarMeView: FC<PropsWithChildren<ToolbarMeViewProps>> = props =>
 {
     const { useGuideTool = false, unseenAchievementCount = 0, setMeExpanded = null, children = null, ...rest } = props;
     const elementRef = useRef<HTMLDivElement>();

src/components/toolbar/ToolbarView.tsx

@@ -1,7 +1,8 @@
 import { CreateLinkEvent, Dispose, DropBounce, EaseOut, GetSessionDataManager, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, Wait } from '@nitrots/nitro-renderer';
+import { AnimatePresence, motion } from 'framer-motion';
 import { FC, useState } from 'react';
 import { GetConfigurationValue, MessengerIconState, OpenMessengerChat, VisitDesktop } from '../../api';
-import { Base, Flex, LayoutAvatarImageView, LayoutItemCountView, TransitionAnimation, TransitionAnimationTypes } from '../../common';
+import { Base, Flex, LayoutAvatarImageView, LayoutItemCountView } from '../../common';
 import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useNitroEvent, useSessionInfo } from '../../hooks';
 import { ToolbarMeView } from './ToolbarMeView';
 
@@ -65,13 +66,23 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
 
     return (
         <>
-            <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isMeExpanded } timeout={ 300 }>
+            <AnimatePresence>
-                <ToolbarMeView useGuideTool={ useGuideTool } unseenAchievementCount={ getTotalUnseen } setMeExpanded={ setMeExpanded } />
+                { isMeExpanded &&
-            </TransitionAnimation>
+                    <motion.div
+                        initial={ { opacity: 0 }}
+                        animate={ { opacity: 1 }}
+                        exit={ { opacity: 0 }}>
+                        <ToolbarMeView useGuideTool={ useGuideTool } unseenAchievementCount={ getTotalUnseen } setMeExpanded={ setMeExpanded } />
+                    </motion.div> }
+            </AnimatePresence>
             <Flex alignItems="center" justifyContent="between" gap={ 2 } className="nitro-toolbar py-1 px-3">
                 <Flex gap={ 2 } alignItems="center">
                     <Flex alignItems="center" gap={ 2 }>
-                        <Flex center pointer className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
+                        <Flex center pointer className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event =>
+                        {
+                            setMeExpanded(!isMeExpanded);
+                            event.stopPropagation();
+                        } }>
                             <LayoutAvatarImageView figure={ userFigure } direction={ 2 } position="absolute" />
                             { (getTotalUnseen > 0) &&
                                 <LayoutItemCountView count={ getTotalUnseen } /> }

src/hooks/rooms/widgets/useAvatarInfoWidget.ts

@@ -346,6 +346,8 @@ const useAvatarInfoWidgetState = () =>
 
     useEffect(() =>
     {
+        if(!roomSession) return;
+
         roomSession.isDecorating = isDecorating;
     }, [ roomSession, isDecorating ]);
 

yarn.lock

@@ -1519,6 +1519,13 @@ for-each@^0.3.3:
   dependencies:
     is-callable "^1.1.3"
 
+framer-motion@^11.2.12:
+  version "11.2.12"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.2.12.tgz#ca5c49f8a1c70163cbadabcbd318acdcfea569fb"
+  integrity sha512-lCjkV4nA9rWOy2bhR4RZzkp2xpB++kFmUZ6D44V9VQaxk+JDmbDd5lq+u58DjJIIllE8AZEXp9OG/TyDN4FB/w==
+  dependencies:
+    tslib "^2.4.0"
+
 fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"