help: animating a cursor?

[MariBelle2002]

hello hello, i have a custom animated cursor id like to use on one of my site pages, and i wanted to know how would i make the animation play out? after setting the cursor, it only showed up as a picture. the cursor id like to animate has only 2 frames.

[devils]

AFAIK it's impossible to have animated cursors in most (if not all) browsers. I can try to figure out a workaround, but I'd honestly suggest just getting some JavaScript cursor effects if you want the cursor to be more unique :)

[TheNothingMonster]

Yeah, animated cursors are a bit weird. Although, there is a solution to bypass this issue!

Someone had found a trick for animating cursors through JavaScript (and CSS too, but it is only supported in Chrome). In short, it works by swapping between a series of images every certain amount of seconds instead of linking a single gif. Pretty simple. Here's the link to the external topic along with the examples.

[fatgrrlz]

Yeah, animated cursors are a bit weird. Although, there is a solution to bypass this issue!

Someone had found a trick for animating cursors through JavaScript (and CSS too, but it is only supported in Chrome). In short, it works by swapping between a series of images every certain amount of seconds instead of linking a single gif. Pretty simple. Here's the link to the external topic along with the examples.

This is what I did with my own website! The CSS only one also appears to work on Firefox. It does have issues continuing to animate when you interact with other items that use keyframes and can occasionally flicker though. I used ezgif to get each frame. I think the Javascript solution might be the better one to use though.

[MariBelle2002]

oh goodness, i didnt get any notifications for this page ^^; didnt check it until now, sorry about that!

[MariBelle2002]

AFAIK it's impossible to have animated cursors in most (if not all) browsers. I can try to figure out a workaround, but I'd honestly suggest just getting some JavaScript cursor effects if you want the cursor to be more unique :)

actually i was thinking about doing this!  had the idea to do so just yesterday, and i ran into some trouble with it too. i havent used javascript before, so it seems tricky to get the cursor effects to work properly without them being kind of buggy. they appear far away from my mouse cursor, and im not sure why 

this is the cursor effect i wanted to add to one of my pages : http://www.mf2fm.com/rv/dhtmlbubblecursor.php

[MariBelle2002]

Yeah, animated cursors are a bit weird. Although, there is a solution to bypass this issue!

Someone had found a trick for animating cursors through JavaScript (and CSS too, but it is only supported in Chrome). In short, it works by swapping between a series of images every certain amount of seconds instead of linking a single gif. Pretty simple. Here's the link to the external topic along with the examples.

ah i see, thats pretty interesting. the cursor i wanted to animate only has two frames of animation, and i have a link for it here : https://pasteboard.co/RZrY4NOk7iPw.gif

since this gif just has 2 frames which keyframe values would i use? ive been a bit confused when it comes to that.

[TheNothingMonster]

since this gif just has 2 frames which keyframe values would i use? ive been a bit confused when it comes to that.

Based on the CSS example, you could make something like this:

Code

html {
  animation: cursoranim 1s infinite;
}
@keyframes cursoranim{
  0%{
    cursor: url("image_filepath/cursor-frame1.png"), auto;
  }
  50%{
    cursor: url("image_filepath/cursor-frame2.png"), auto;
  }
  100%{
    cursor: url("image_filepath/cursor-frame1.png"), auto;
  }
}

Changing the " 1s " in the animation property basically changes the speed of your cursor. The higher the number, the slower it goes & the lower the number, the faster it goes.

Make sure to change " image_filepath " to the file path of your images!

If you are wondering on how to convert the .gif into two .pngs, you could:

• Go to Ezgif (GIF to Sprite Sheet) & upload your .gif file.
• When it is ready, select Tile alignment: Stack horizontally, Columns: 2 & hit convert.
• Seperate the new .png file into two .pngs (there are a lot of programs for this, like GIMP).
• Done! You have your 2 frames!

Or if you don't want to think too much about it, just download the files I embedded for you.

If something is unclear, you can always ask!

The CSS only one also appears to work on Firefox.

Note: Yeah, I was wrong. The CSS method works in Firefox too! Plus I would say that it is much more recommended than the JavaScript one.

[MariBelle2002]

thanks for the embedded files 

okay so, i used the cursoranim code you gave, but it didnt seem to work. the custom cursor didnt show unfortunately. hm is there a specific place i should put the cursor animation code?

i have the full code for the page here:

[TheNothingMonster]

okay so, i used the cursoranim code you gave, but it didnt seem to work. the custom cursor didnt show unfortunately. hm is there a specific place i should put the cursor animation code?

Oh, that's because the name of the keyframe animation is " animate " and not " cursoranim " as I set it to be. It should work if you replace " animate " with the correct name.

In short, when we add " html { animation: cursoranim 1s infinite; } ", we tell everything inside the html tags to play an animation for a period of time. So that the page understands which animation to play, we have to match it with the correct animation, which is " cursoranim " in this case. Of course, you can change the animation names to anything you like, just remember to rename every instance of the name or things might brake. :]

Also, I suggest you adding your styling at the top of the page, inside the head tag. We usually place scripts like JavaScript underneath the body of the page.

Here, I cleaned-up your code for reference:

Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pokemon Shrine</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all" />
    <script src="https://unpkg.com/webamp@1.4.0/built/webamp.bundle.min.js"></script>
    <style>

      @import url("https://fonts.googleapis.com/css2?family=Mynerve&display=swap");

      html {
        animation: cursoranim 1s infinite;
      }

      @keyframes cursoranim{
        0%{
          cursor: url("https://cdn.discordapp.com/attachments/1137355840978944091/1144934289331474582/cursor-frame1.png"), auto;
        }
        50%{
          cursor: url("https://cdn.discordapp.com/attachments/1137355840978944091/1144934303403364413/cursor-frame2.png"), auto;
        }
        100%{
          cursor: url("https://cdn.discordapp.com/attachments/1137355840978944091/1144934289331474582/cursor-frame1.png"), auto;
        }
      }

      body {
        background-image: url("https://cdn.discordapp.com/attachments/1137355840978944091/1141189252806348800/Glitter-Graphics-the-community-for-graphics-enthusiasts.png");
        padding: 5px;
        background-repeat: repeat;
        width: 1000px;
        position: relative;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }

      #main {
        border: 3px red solid;
        height: 3000px;
        width: 1000px;
        background-image: url('https://cdn.discordapp.com/attachments/1137355840978944091/1143702168273178775/tumblr_inline_mqijm93dHT1qz4rgp.png');
        position: absolute;
        bottom: -3230px;
      }

      #title {
        width: 900px;
        position: absolute;
        top: -150px;
        right: 60px;
      }

      #scrollbox {
        height: 550px;
        width: 930px;
        border: red 2px solid;
        position: relative;
        left: 35px;
        overflow-y: scroll;
        overflow-x: hidden;
      }

      #flaaffybutton {
        position: absolute;
        right: -150px;
        width: 125px;
        bottom: -3220px;
      }

      #musicplayerbox {
        position: sticky;
        width: 300px;
        height: 300px;
        border: 3px purple dashed;
        top: 0px;
        left: -20px;
      }

    </style>
  </head>

  <body>

    <div id="main">
    <p>just some placeholder text for now :></p>
    <ul> to do:
      <br><br>
      <li>add custom flaaffy cursor (that moves)</li>
      <li>plan out how the page layout will look</li>
      <li>set some custom fonts</li>
      <li>make a navbar</li>
      <br><br>
    </ul>

    <div id="musicplayerbox" style="left: -20px;">
      <audio controls loop autoplay src="https://files.catbox.moe/8crcwr.mp3" type="audio/mp3" style="height: 35px"></audio>
    </div>

    <div id="scrollbox"></div>

    <img src="https://cdn.discordapp.com/attachments/1137355840978944091/1141176075989303358/Untitled1205_20230815200420.png" id="title">
    <img src="https://cdn.discordapp.com/attachments/1137355840978944091/1141892981679468604/oie_ooF04H7uoI81.gif" id="flaaffybutton">

  </body>

</html>

[MariBelle2002]

thank you for the example

sadly after doing everything you said in your example, my cursor shows up as the default cursor i use i use chrome, and i suppose this method doenst work with it. not too sure though, but im happy to try out any other methods, like the js one and see if they work

[TheNothingMonster]

my cursor shows up as the default cursor i use i use chrome, and i suppose this method doenst work with it.

Hmm... Weird, it works on both Chrome and Firefox for me! I'm guessing your default cursor is overriding the new one. This could have happened if your default cursor is using the !important rule or something similar. I cannot think of any other way this could have happened. Or perhaps I am missing something too.

[MariBelle2002]

yeah, its strange, especially since i was able to get have a custom static cursor through css before

but when it comes to animated cursors chrome seems to act a bit funky haha