Animated Cursor Support in Web Applications

Animated cursor support in web applications?

After doing some more research, I don't think it's possible at the moment. It doesn't seem that any of the browsers support animated cursors as of 2/8/2012 using the CSS cursor property. I suppose it could be done using JavaScript to repeatedly change the value of the cursor property every few frames to make it appear animated, but that may be more trouble than it is worth.

Animated cursor files .ani files do not work. All 5 major web browsers will not show the cursor. If you try some CSS like, cursor: url('animated.ani'), that cursor will not show up!

If you make the cursor an animated gif file, it only shows up on some browsers and it's temperamental, like cursor: url('animated.gif'), the cursor works in Firefox and Chrome but it is not animated, the cursor does not work at all in IE9 or Opera, and it did something really weird in the Windows version of Safari - it works but is only animated when I move the cursor vertically on the screen, and did not animate at all when the cursor was not moving or was moving horizontally. Credit to Brutallus for the idea to use an animated gif even though it did not work!

It doesn't seem that browsers support animated cursors at this time which is a shame because I really think it would add some depth to certain web applications. I don't advocate using animated cursors for most websites because they are extremely annoying, but there are some rare situations where they can be useful, such as a HTML5 game where the cursor can potentially add to the theme of the game.

Mouse Cursor As .Gif not Animating

A similar question was asked here :

Animated cursor support in web applications?

After doing some more research, I don't think it's possible at the moment. It doesn't seem that any of the browsers support animated cursors as of 2/8/2012 using the CSS cursor property. I suppose it could be done using JavaScript to repeatedly change the value of the cursor property every few frames to make it appear animated, but that may be more trouble than it is worth.

So the answer seems to be that it isn't possible at the moment.

How to make Pottermore-like animated cursor

You can create such effects using css and JavaScript:

var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
var nav = (!document.all || window.opera);var tmr = null;var spd = 50;var x = 0;var x_offset = 5;var y = 0;var y_offset = 15;
document.onmousemove = get_mouse; 
function get_mouse(e){      x = (nav) ? e.pageX : event.clientX+standardbody.scrollLeft;  y = (nav) ? e.pageY : event.clientY+standardbody.scrollTop;  x += x_offset;  y += y_offset;  beam(1);     }
function beam(n){  if(n<5)  {    document.getElementById('div'+n).style.top=y+'px'    document.getElementById('div'+n).style.left=x+'px'    document.getElementById('div'+n).style.visibility='visible'    n++;    tmr=setTimeout("beam("+n+")",spd);  }  else  {     clearTimeout(tmr);     fade(4);  }   } 
function fade(n){  if(n>0)   {    document.getElementById('div'+n).style.visibility='hidden'    n--;    tmr=setTimeout("fade("+n+")",spd);  }  else clearTimeout(tmr);}

body{overflow-x:hidden;}
.s1{  position  : absolute;  font-size : 10pt;  color     : blue;  visibility: hidden;}
.s2{  position  : absolute;  font-size : 18pt;  color     : red; visibility : hidden;}
.s3{  position  : absolute;  font-size : 14pt;  color     : gold; visibility : hidden;}
.s4{  position  : absolute;  font-size : 12pt;  color     : lime; visibility : hidden;}

<div id="div1" class="s1">*</div><div id="div2" class="s2">*</div><div id="div3" class="s3">*</div><div id="div4" class="s4">*</div>

Animated arrow pointer

For animated cursor, you must have an .ani file (animated cursor) which you want to use.

HTML example:

<div class="item1">abcdefgh</div>

<div class="item2">asdasdasdasdas</div>

CSS Example

.cursor1 { cursor: help;}

.item1 { line-height: 20px;
         border: 1px solid #000;
          height: 100px;   
          width: 100px;               
}

For custom cursor read here: http://beradrian.wordpress.com/2008/01/08/cross-browser-custom-css-cursors/ to use in above CSS.

and JavaScript:

$(function() {
    $(".item1").on("mouseover mouseout", function() {
        $(this).toggleClass("cursor1");       
    });        
});

My answer is that I understood from your query.

Phaser 3 - Custom animated cursor not working

This is not a phaser problem, this is a issue of the browser(s). As far as I know browsers don't support animated cursors. There are some workarounds, but all methods are hacky and might not work well under high load.

But if you really want to do it, here is an article describing a possible solution/approach https://jordaneldredge.com/blog/rendering-animated-ani-cursors-in-the-browser/.

A differnet method would be moving a Sprite to the Mouse position, and hidding the real MousePointer.

Here a possible, phaser solution:

var config = {
    type: Phaser.AUTO,
    width: 400,
    height: 200,
    scene: {
        preload: preload,
        create: create,
        update
    }
};

let cody 
var game = new Phaser.Game(config);

function preload ()
{
    this.load.spritesheet('brawler', 'https://labs.phaser.io/assets/animations/brawler48x48.png', { frameWidth: 48, frameHeight: 48 });
}

function create() {
    this.input.setDefaultCursor('none');
    // some animation
    this.anims.create({
        key: 'walk',
        frames: this.anims.generateFrameNumbers('brawler', { frames: [ 0, 1, 2, 3 ] }),
        frameRate: 8,
        repeat: -1
    });

    cody = this.add.sprite(0, 0, 'brawler').setOrigin(.5);
    cody.play('walk');
    
    this.input.on('pointerdown', _ => console.info(_))
}

function update(){
    // update the position
    cody.x = game.input.mousePointer.x;
    cody.y = game.input.mousePointer.y;
}

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

Custom cursor doesn't work in IE9?

http://jsfiddle.net/TMjvY/

This works in IE 9 now, just added ,auto onto the CSS.

Animated Cursor Support in Web Applications