Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Page transitions with Barba JS #9

Open
Louboutin1017 opened this issue Jun 30, 2022 · 4 comments
Open

Page transitions with Barba JS #9

Louboutin1017 opened this issue Jun 30, 2022 · 4 comments
Labels
question Further information is requested

Comments

@Louboutin1017
Copy link

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 Drafteed added the question Further information is requested label Jul 4, 2022
@Drafteed
Copy link
Collaborator

Drafteed commented Jul 4, 2022

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
Copy link
Author

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
Copy link
Collaborator

Drafteed commented Jul 6, 2022

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
Copy link
Author

Louboutin1017 commented Jul 7, 2022 •
edited

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Louboutin1017 @Drafteed