Trouble with Observer Basics

[Carl]

Hi Team,

 

I'm trying to see if it is practical to tap into some of Observer's features for that mouse follower effect i saw on your twitter feed 😁 

 

It seems there may be some sort of distance tolerance or velocity threshold which determines how often elements are placed. I'm starting with the absolute basics of trying to only fire something after 50px of movement

 

Below I am only updating the x/y of the circle if the mouse moves 50px.

 

 

Move mouse slowly to see position updates only when mouse reaches the square border.

 

Right now it meets my minimal requirement, however I only got this to work by having both an empty onMove callback and an onChange callback in place.

 

if you comment out the onMove (line 7) it no longer works.

 

The question is, why do I need the empty onMove?

 

Thanks for your help!

 

Carl

See the Pen PoxdybR?editors=0110 by snorkltv (@snorkltv) on CodePen

[GreenSock]

Great question, @Carl! And you're such a pro with minimal demos - thank you 

 

Observer is highly optimized for performance, like it debounces events by default and it also only adds pointermove/mousemove/touchmove event listeners while the mouse/pointer/touch is pressed unless you've got an onMove defined. Those events fire VERY frequently, so it's a huge waste of CPU to constantly handle them while the user isn't even interacting with the screen (only hovering).  

 

In other words, Observer is set up primarily for interaction, so the onChange stuff for pointer events will only fire between press and release (unless you've got an onMove defined of course). I'm open to adding some kind of flag/config option to make it behave differently if it'd be really helpful for a fair number of folks. like hoverSensitive: true or pointerEvents: "all" or changeOnMove: true or interactionOnly: false or something better (open to ideas). 

[Carl]

Thanks for the prompt and clear reply. Very helpful.

That also takes care of one of the other oddities I experienced where onChange would only fire when I clicked.

 

i'm not so sure an API change is necessary. I read the docs kind of hastily and was just throwing callbacks in until something worked.