How to properly import in next app

sagarkhadka commented 1 year ago

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.

Drafteed commented 1 year ago

Please show your code with import statement.

sagarkhadka commented 1 year ago

I downloaded the file and copied all files from js and scss folder and imported them like this in _app.tsx

import Cursor from '../../public/assets/mouse/js/cursor'

function MyApp({ Component, pageProps }: AppProps) {
  const cursor = new Cursor()

  return (
    <>
      {/* <NavLink /> */}
      <Component {...pageProps} />
    </>
  )
}

This works fine and shows mouse follower as well but after making some changes in the components it crashes with this error

Drafteed commented 1 year ago

You are using an older version of library from another repo. Please read the instructions carefully, you do not need to download anything manually.

sagarkhadka commented 1 year ago

First I tried the same way shown in the instruction and got the same error above. After this I downloaded the file and still got the same result.

1realjulius commented 1 year ago

Do you have any instructions to add this to a next js app

Giuseppetm commented 1 year ago

This library manipulates document, and document is not available until client render. With a useEffect on your index.js file (or _app.js if you are using custom structure) you solve this problem.

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

MouseFollower.registerGSAP(gsap);

export default function MyApp({ Component, pageProps }) {
    useEffect(() => {
        const cursor = new MouseFollower();
    })

    return (
        <>
            <Head>
            </Head>

            <Component {...pageProps} />
        </>
    )
}

sagarkhadka commented 1 year ago

This works without any error thank you very much for the tip. As you suggested, I import mouse-follower in _app.tsx. It does not show any error like previous. If I want to use different features like sticky or magnetic on different component how can i do it ?

Giuseppetm commented 1 year ago

This works without any error thank you very much for the tip. As you suggested, I import mouse-follower in _app.tsx. It does not show any error like previous. If I want to use different features like sticky or magnetic on different component how can i do it ?

It's explained in the library documentation. Sticky effect is here.

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

If it doesn't work because of React try this: <div data-cursor-stick="#stick-me">Hover <div id="stick-me">me</div> to stick cursor!</div>

sagarkhadka commented 1 year ago

Thank You very much for the tip.

I think I found some bug. Or it might be just me who doesn't know how to use properly.

<div data-cursor-text="MY WORK" className={style.imageContainer}>

Here I am trying to achieve something like this

But, I am getting following result.

Giuseppetm commented 1 year ago

What's that class you are using? If you need to style something try to do it inside of the div. Also make sure that the color of the text is not the same as the one of the cursor.

<div data-cursor-text="MY WORK">
      <div className={style.imageContainer}> .. </>
</div>

sagarkhadka commented 1 year ago

This is what I am getting.

https://user-images.githubusercontent.com/25609902/196871586-3d27311c-fa94-4684-909c-029e876ba017.mp4

And this is the code in the component

<section className={style.works}>
  <div className={`${style.cardBox} row row-cols-2`}>
    {work.map((ourWork, index) => (
      <div
        key={index}
        className={index % 2 === 0 ? `${style.box1}` : `${style.box2}`}>
        <div
          data-cursor='-color-red -lg'
          data-cursor-text='MY WORK'>
          <div className={style.imageContainer}>
            <Image
              src={ourWork}
              width={900}
              height={1000}
              objectFit='cover'
              alt=''
            />
          </div>
        </div>
      </div>
    ))}
  </div>
</section>

Giuseppetm commented 1 year ago

This issue is probably related to the fact you are using a map function with each element having the same data-cursor. Try to use it on a single item (without map), if it works it means this is the problem. There probably is some documentation about having the cursor available for multiple items.

sagarkhadka commented 1 year ago

I don't think map function is a problem here. As you mentioned I tried this on another element which is not mapped and still the situation is same. Here is the screenshot

And the code is

<div data-cursor-text='App  Dev'>
    <Image src={laptop} alt='laptop' layout='responsive' />
</div>

Giuseppetm commented 1 year ago

Is the style initialized correctly? I had to import index.scss of the library from node_modules @import "../node_modules/mouse-follower/src/scss/index.scss";

sagarkhadka commented 1 year ago

I also imported index.scss in global.scss file @import "/node_modules/mouse-follower/src/scss/index.scss";

gaurdivit commented 1 year ago

@sagarkhadka am unable to understand what to import and where to import...

sagarkhadka commented 1 year ago

@gaurdivit In next.js I did following things:

npm install gsap and npm install mouse-follower
In your _app.tsx/.jsx file import following import MouseFollower from 'mouse-follower' import gsap from 'gsap'
After the import do the following in same file MouseFollower.registerGSAP(gsap) useEffect(() => { const cursor = new MouseFollower() }, [])
And lastly in your global.css import the scss file for the mouse-follower @import "/node_modules/mouse-follower/src/scss/index.scss";

After doing all this you should be able to see mouse follower in your web project.

h3ma209 commented 1 year ago

hello @sagarkhadka can you explain more about your solution please becuz i did exactly what you said but it doesnt work it creates another scrollbar but doesnt show anything

sagarkhadka commented 1 year ago

@h3ma209 after you mentioned the issue I tried in new fresh next js project and I also got the same issue as you. The mouse follower is not visible and is showing weird behavior like overflowing the page. Since the MouseFollower is using scss in their source file I tried npm i sass and renamed the global.css to global.scss and it is working as expected. So, try installing sass it will work.

h3ma209 commented 1 year ago

it works thank you very much

gaurdivit commented 1 year ago

@sagarkhadka can I use it in react js?

gaurdivit commented 1 year ago

if yes then are the steps same as of next js?

gaurdivit commented 1 year ago

Syntax error: /Users/divitgaur/Documents/stuff/Personal/WEB/Projects/myown_portfolio/node_modules/mouse-follower/src/scss/index.scss Unknown word (102:11) 100 | transition:opacity 0.4s, transform 0.3s; 101 |

102 | #{$root}.-text &, #{$root}.-icon & { | ^ 103 | opacity:1; 104 | transform:scale(1); WARNING in [eslint] src/App.js Line 15:11: 'cursor' is assigned a value but never used no-unused-vars

this error is showing @sagarkhadka

sagarkhadka commented 1 year ago

In react as well the step is same. I just checked in fresh vite react project it is working fine please check the following steps.

npm i gsap mouse-follower sass
rename your index.css to index.scss and include @import "/node_modules/mouse-follower/src/scss/index.scss";

In your app.js


import gsap from 'gsap'
import MouseFollower from 'mouse-follower'

MouseFollower.registerGSAP(gsap)

useEffect(() => { const cursor = new MouseFollower() }, [])



This should do the thing.

h3ma209 commented 1 year ago

@sagarkhadka also please how can i put the image behind the title or text when it hovers for example cubertos landing section when i land on website shows the video and puts it behind the title instead of being over the title and hiding it also how to resize it on hover

gaurdivit commented 1 year ago

It's working perfectly fine didn't change my app.css to app.scss Thanks you so much @sagarkhadka Wanna connect?

h3ma209 commented 1 year ago

@sagarkhadka please can you answer my question

sagarkhadka commented 1 year ago

@h3ma209 I haven't used this feature previously so it took time to know the issue. When image is shown on hover the mouse follower uses .-media class so in your scss file you can do .-media { z-index: -99 } which will put the images and videos you use to the back side of your text element. There might be some other ways too but this also works.

To resize you can do transform: scale(1.75) in ::before class of .-media. But, when doing this image is not filling the gap.

h3ma209 commented 1 year ago

ok thank you it did work but also i wanted to the title to change color so its visible like i tried using mix-blend-mode: difference but didn't work

joshAntoniuk commented 1 year ago

Is there a way to make this work with tailwind?

sagarkhadka commented 1 year ago

Hey @joshAntoniuk, what problem are you facing. I think even when using tailwind css, the process should be same as shown here. I tried on fresh next 13.4.4 with tailwind with the same process it is working. If you want to change the color or something I think you can do it using @apply rule of tailwind this in scss file

.mf-cursor {
  @apply text-emerald-600;

  @media screen and (max-width: 900px) {
    @apply hidden;
  }
}

Cuberto / mouse-follower

How to properly import in next app #13