cuberto / mouse-follower Goto Github PK

When the website direction is from RTL
data-cursor-img
The cursor doesn't change to an image, Rather, the image comes next to the cursor, and the cursor remains the same as it.

✅I added the direction[LTR] to fix that -> css

.mf-cursor {
direction: ltr;
}

Thanks ❣️

First of all, thank you!

Not sure if this is a mistake in the readme file:
<div data-cursor-stick-stick="#stick-me">Hover <div id="stick-me">me</div> to stick cursor!</div>

Looks like there is one to many "-stick".

Hello! it's an amazing library.

I have some issues when working with safari. If I hover the cursor over an image, text appears or when I hover over links or buttons, the cursor decreases. The problem is that if I scroll down, the cursor remains in the same state. Everything works fine in google chrome. Maybe I missed something.

When i click on a link to the next page the cursor doesn't disappear.

This hook code doesn't remove the cursor on page transition.
barba.hooks.beforeEnter(()

Kindly advise how to fix this, if possible provide a fix here to enable other users see it.

Also you should have a Slack or discord community where users like me ask questions and get help from the community.

is it possible to enable two states at the same time?

I want to set a img and text to the cursor, the picture and text are displayed, but without the text background.

I apologize if I missed something in the documentation. Thank you!

Hi, is it possible to show the cursor after opening a modal? (bootstrap modal) do I need to initialize the cursor again?

I want to change my cursor color from white to black when entering a specific element because the element i have created has background color of white so while entering it i need to change the cursor to black

Some one please help me solve this issue.

Thank you in advance!!

how can i resize the cursor follower when it enters a div or hovers over a title
is there something like data-cursor-size={90} something like that ?

also how can i put the video or the image behind the title like cubertos landing section when the video shows it goes behing the title

Can we have the ability to add multiple source for video

Any option to update the current cursor position on dragMouseMove with flickity carousel.

jQuery(document).ready(function($) {
$('.news-box h3 a')
.attr('data-cursor-img', '/wp-content/uploads/2023/04/soccer_cover.jpg');
});

REFERENCE FROM THE ATTRIBUTE ABOVE, INSTEAD OF USING A LINK OF AN IMAGE, HOW CAN I SET THE DATA-CURSOR-IMG TO dynamicaly call the post featured image when $('.news-box h3 a') text link is hovered upon? Any clues?

Hello!
how can i make sticky social icons follow cursor?

Hey guys, I think I did something wrong when implementing this library on my Webflow Website.

It seems like the styles given in the SCSS file are overwriting some of the changes I'm making such as size and opacity.

Here's the dev web adress if you wan't to take a look : https://ux-forge.webflow.io/home-v2

I know there's something to do with states but I seem to get my head around it.

Thanks in advance !

Here's the current CSS .mf-cursor { @media screen and (max-width: 769px) { display: none; } color : #050505; } .-cursor-hover { font-weight : 500; letter-spacing: 1px; opacity: 1; color : #F44708FF; }

And the script : <script> const cursor = new MouseFollower({ container: document.body, speed: 0.8, skewing: 1, skewingText: 3, skewingDelta: 0.001, skewingDeltaMax: 0.15, }); </script>

Hello,
I encountered an issue with your library; the code I used is the most basic one to run an example.

import MouseFollower from "mouse-follower";
import gsap from "gsap";

MouseFollower.registerGSAP(gsap);
const cursor = new MouseFollower();

Versions with this problem: 1.0.4 to 1.0.6
1.0.3 and below work fine.

Error details

Environment details

Edge 101.0.1210.53
React 18.1.0
Gsap 3.10.3 (3.10.4 doesn't solve this)
Sass 1.52.1

how do we change color of the cursor in normal HTML

Hello,

here you can find a little error in the readme about state detection.
The classes name should be my-image and my-input (not mf-image and mf-input).

The link https://nana-asia.com/ (open with caution) in the reference to NANA in the file README.MD no longer seems to point to the original page. I was redirected to dubious websites several times. Can somebody confirm this?

When I use mouse follower it's working fine on desktop but when I double press on mobile and tablet device it shows the mouse cursor dot. It's annoying. I tried everything I can do but didn't work and I also tried the 2 method.

1st one : if (window.matchMedia('(pointer:fine)').matches) {
const cursor = new MouseFollower();
}

2nd one : .mf-cursor {
@media screen and (max-width: 769px) {
display: none;
}
}

Please help me to fix this issue, thank you

I use this plugin for single page website. How can I resolve it?
Here the codepen sample

I am doing like this but the icon is not applying. I even tried to add svg code directly in data-cursor-icon but didn't work.

<h4
  data-cursor-icon='/icons/up-arrow.svg'
  id={`service-${index}`}
  ref={serviceRef}
  className='tracking-[-0.25rem] md:tracking-[-0.5rem]'
>
  {serviceTitle}
</h4>

it only enlarges the icon

Hello, sorry I'm very new with cuberto, so I'm having alot of issues. I tried using state detection with the cdn, but when when i hovered on the specified section, it does not change.

My js code:
const cursor = new MouseFollower({ container: '.my-element', speed: 0.3, stateDetection: { '-pointer': 'a,button', '-pointer': '.home-publication', '-hidden': '.my-input' } });

Please help

How I wrap image like this using data attribute?

Hi.

Getting a Uncaught TypeError: Cannot set properties of undefined (setting 'innerHTML') when using either of the Text, Image or Video mode.

I'm using it with Nuxt 3 and everything else seems to work fine.

This is how I'm setting it up.

CustomCursor.vue component:

<template>
  <div class="cursor mf-cursor -exclusion"
       ref="cursorRef"></div>
</template>

<script setup>
import MouseFollower from "mouse-follower";
import gsap from 'gsap';

MouseFollower.registerGSAP(gsap);

const cursorRef = ref()

onMounted(() => {
  const cursor = new MouseFollower({
    el: cursorRef.value,
    speed: 0.8,
    skewing: 3,
  });
})
</script>

Then the component above is loaded inside app.vue file.
I know you can't see the SCSS import, but they are being loaded on an internal file.

The Cuberto Mouse Follower library I'm trying to implement is not working as expected. The cursor follower functionality is not showing up on my website, and I'm finding the documentation to be quite complex and difficult to understand.

It would be extremely helpful if someone could provide a basic markup example that demonstrates how to properly set up and use this library. Having a simple, well-commented code snippet to reference would make it much easier for me to get this feature working correctly on my site.

Possible Causes/Solutions:
I'm not sure what might be causing the issue with the cursor follower. It's possible that I'm missing a step in the setup or configuration process, but the documentation doesn't seem to provide a clear, step-by-step guide for getting started.

After embedding the scripts in Wordpress (with elementor) I do get the following JS error in the console:
Cannot read properties of null (reading 'appendChild')

index.js in line 153: this.el.appendChild(this.inner);

Hello,
using sticky effect via data attribute causes this error:

<div data-cursor-stick>Hover me to stick cursor!</div>

Details

Mouse-follower version: 1.0.7 (I tried 1.0.3 too, same error)

Hello, I have integrated the scripts in wordpress and I can see the mf-cursor funtional. However I would like to apply some mouse cursor effects to some sections or images. How do I do that?

TRIED MANY TIMES BUT I CAN'T ADD THE MAGNET TO ANYTHING IT ALWAYS GIVES THE ERROR - TypeError: Cannot read properties of null (reading 'getBoundingClientRect') just using data-cursor-stick also cursor.setStick(el); doesn't work anyone helpout

Hi again, I added this tag (data-magnetic), but it didn't work. I think it's disabled!

Thank you.

I have done 'npm install mouse-follower --save' on my next app. How do I correctly import it. I managed to import somehow in _app.tsx but every time page refresh the line 'const cursor = new MouseFollower();' throws an server error and crasheh the web page. But if I commented it and uncomment it then it works fine. But after this if the page refresh it again shows the same error.

I have a project section similar to Cuberto's, where I've enabled the data-cursor-text="Explore" attribute for images. When I click on an image to navigate to another page, the Mouse Follower cursor still displays the text "Explore" and retains its enlarged size on the new page.

<Image src={project.imageUrl} alt={project.name} height={450} width={645} className="hover:scale-[1.05] cursor-pointer" style={{ transition: "all 0.5s linear" }} onClick={() => handleClick(project.href)} layout="responsive" loading="lazy" data-cursor-text={"Explore"} />

im trying to put the image behind the title but it gets on top of the text

Hey Guys, this is my first time using mouse-follower, I'm using Next.js and Tailwind and this is my layout.tsx in appDir. I'd appreciate any help 🙏

I'm getting the following error when I use the lib:

"use client";
import { useEffect, useRef, useState } from "react";
import { AnimatePresence} from "framer-motion";
import gsap from "gsap";
import Lenis from "@studio-freight/lenis";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { usePathname, useRouter } from "next/navigation";
import { MobileMenu } from "../components/Navigation/MobileMenu";
import NavBar from "../components/Navigation/Navbar";
import "../styles/globals.css";
import "../node_modules/locomotive-scroll/src/locomotive-scroll.scss";
import "../node_modules/mouse-follower/src/scss/index.scss";
import MouseFollower from "mouse-follower";

useEffect(() => {

    const cursor = new MouseFollower({
      container: '.mf-container',
      speed: 0.3
    });

    const lenis = new Lenis({
      duration: 1.2,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), 
      smooth: true,
      mouseMultiplier: 1,
      smoothTouch: false,
      touchMultiplier: 2,
      infinite: false,
    });

    function raf(time: any) {
      lenis.raf(time);
      ScrollTrigger.update();
      requestAnimationFrame(raf);
    }
    requestAnimationFrame(raf);
  });

return (
    <html>
      <head />
      <body
        data-scroll-container
        ref={ref}
        className=".mf-container flex bg-white min-h-screen flex-col container mx-auto max-w-screen-xl items-stretch dark:bg-black scrollbar-hide "
      >
        <AnimatePresence exitBeforeEnter mode="wait">
          <div className="data-scroll">{children}</div>
          <div data-cursor-stick=".stick-me" className="stick-me">Hover me to stick cursor!</div>
          <div className="nav hidden lg:flex bottom-10 fixed self-center">
            <NavBar />
          </div>
          <MobileMenu />
        </AnimatePresence>
      </body>
    </html>
  );

Hey, this is for other slow folks (like me) that might run into this as it's not in the readme.md!

To change color on anything you just need to do:
data-cursor="-your-color"

Then in your styling you can just do:
.-your-color { color: #fb6052; }

Took me longer than it should to figure this out (ended up writing my own way of implementing until i stumbled on it LOL)

I wan to use colorful cursor not only black and white.

I have a slider color with dynamically slide color so I need to use dynamic cursor background color.

Please suggest me solution.

Thank you in advance

When using the Smooth Scrollbar the Cursor is not working well, is there any tips on that?

https://github.com/idiotWu/smooth-scrollbar

Thank you,

Hello!
I have problem with links inside nextjs, when u click on Link with cursor, it wiil be save on new page that you relocate.
Try to set hideOnLeave at manually set data-cursor-text="" still do not working

Here we click on link with cursor:

Here how i set text on hover:

Here new page with same cursour:

mouse-follower version : 1.1.2
nextjs version : 13.0.5
react 18.2.0
gsap: 3.11.3