search

Cuberto / mouse-follower

A powerful javascript library to create amazing and smooth effects for the mouse cursor on your website.
MIT License
724 stars 60 forks source link

Page transitions with Barba JS #9

Open Louboutin1017 opened 2 years ago

Louboutin1017 commented 2 years ago

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.

Drafteed commented 2 years ago

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

I don't see your hook code. This should be something like this:

barba.hooks.beforeEnter(() => {
  cursor.hide();
});

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

We do not provide technical support. If you have questions, you can ask them here.

Louboutin1017 commented 2 years ago

This hook code doesn't remove the cursor on page transition.

barba.hooks.beforeEnter(()

I don't see your hook code. This should be something like this:


barba.hooks.beforeEnter(() => {

  cursor.hide();

});

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

We do not provide technical support. If you have questions, you can ask them here.

Thanks for the response but I tried using the provided code and it only CSS hide the cursor and on the next page the cursor was hidden and not active.

Did you by any chance test it on your environment with Barba JS.

Drafteed commented 2 years ago

on the next page the cursor was hidden and not active.

You should show cursor after page transition is end:

barba.hooks.afterEnter(() => {
  cursor.show();
});

Also check that the cursor is initialized OUTSIDE a changing container (data-barba="container" or main):

<body data-barba="wrapper">
  <main data-barba="container" data-barba-namespace="home">
    <!-- put here the content you wish to change
    between your pages, like your main content <h1> or <p> -->
  </main>
  <!-- CURSOR ELEMENT SHOULD BE THERE -->
</body>
Louboutin1017 commented 2 years ago

I tried to follow your instructions but the plugin automatically added the div mf-cursor cursor, and I changed the classname according to your documentation and the result as below.

// this was automatically added by the plugin even when I changed the classname to pagecursor
<div class="pagecursor -hidden" style="will-change: auto; transform: translate(1205.87px, 253.021px) rotate(-5.4053deg) scale(1.00031, 0.99969);"></div> 

// this my custom class and its not working and both are present on the page. just one is active and the second not.
<div class="pagecursor"></div>

Here are all the code on the js file.

const cursor = new MouseFollower({
   el: null,
   container: document.body,
   className: "pagecursor",
});

barba.hooks.beforeEnter(() => {
   cursor.hide();
});
barba.hooks.afterEnter(() => {
   cursor.show();
});

Kindly advise.