update: follower div

adnan-td · Nov 23, 2023 · c42e7ce · c42e7ce
1 parent 201738a
commit c42e7ce
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-mouse-follower",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "React mouse follower is a package based on react and framer motion. It provides components to add and customise cool mouse follower to your cursor",
   "repository": {
     "type": "git",

diff --git a/src/component/follower_div.tsx b/src/component/follower_div.tsx
@@ -71,28 +71,35 @@ export function FollowerDiv({ pos, options }: { pos: MousePosition; options: Mou
           }}
         >
           {options.text && !options.backgroundElement ? (
-            <AnimatePresence mode="wait">
-              <motion.p
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0.3 }}
-                transition={{ type: 'tween', duration: options.followSpeed ? 0.3 / options.followSpeed : 0.3, ease: 'circOut' }}
-                style={{
-                  width: '85%',
-                  textAlign: 'center',
-                  lineHeight: options.textLineHeight,
-                  letterSpacing: options.textLetterSpacing,
-                  fontFamily: options.textFontFamily,
-                  fontSize: options.textFontSize ? options.textFontSize : '12px',
-                  color: options.textColor ? options.textColor : 'white',
-                }}
-              >
-                {options.text}
-              </motion.p>
-            </AnimatePresence>
+            <motion.p
+              initial={{ opacity: 0.7 }}
+              animate={{ opacity: 1 }}
+              transition={{ type: 'tween', duration: options.followSpeed ? 0.3 / options.followSpeed : 0.3, ease: 'circOut' }}
+              style={{
+                width: '85%',
+                textAlign: 'center',
+                lineHeight: options.textLineHeight,
+                letterSpacing: options.textLetterSpacing,
+                fontFamily: options.textFontFamily,
+                fontSize: options.textFontSize ? options.textFontSize : '12px',
+                color: options.textColor ? options.textColor : 'white',
+              }}
+            >
+              {options.text}
+            </motion.p>
           ) : null}
           <AnimatePresence mode="wait">
             {options.backgroundElement ? (
               <motion.div
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  borderRadius: '9999px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  overflow: 'hidden',
+                }}
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0.3 }}
                 transition={{ type: 'tween', duration: options.followSpeed ? 0.3 / options.followSpeed : 0.3, ease: 'circOut' }}