Observer, misunderstanding with onChange, onMove and onStop.

[romain.gr]

Hi,

 

I'm trying to implement Gsap Observer, but I find the documentation unclear on one little point.

 

So the doc says :

 

onChange : Function - function to call when there is movement on either the y-axis (vertically) or the x-axis (horizontally). It will keep calling the function as long as the movement continues (subject to any tolerance threshold).

 

I understand that when there is a mouse movement (type: 'pointer'), it should be triggered, but nothing happens, the onChange function is only triggered if I click and then move. That's not what the documentation says. It says "when there is movement" only.

 

Actually I would like to catch the velocity when the cursor moves (and only moves), apply the velocity to something, and then, when the cursor stops, do something else.

 

So I used onMove, it works great, It seems to be design to do exactly what I want. The problem is that the onStop event doesn't trigger when the mouse stops to move. The onStop event, in my case, only works with onChange, but as I said previously, the onChange event only trigger when I drag (click and move).

 

Is there a onStopMove event?

 

Observer.create({
  target: '.first-screen',
  type: 'pointer',
	onChange: (e)=>{ //only works when mouse pressed
		var vel = e.velocityX * Math.sign(e.velocityX);
		gsap.to(document.querySelector('video'), {playbackRate: vel /1000});
	},
  	onMove: (e)=>{ //triggered when mouse mouse hover '.first-screen'
		var vel = e.velocityX * Math.sign(e.velocityX);
		gsap.to(document.querySelector('video'), {playbackRate: vel /1000});
	},
	onStop: (e)=>{ // this only triggers when onChange stops, I WANT THIS TO WORK WHEN THE CURSOR STOPS MOVING
		console.log('STOP');
		gsap.to(document.querySelector('video'), {playbackRate: 1});
	},
});

Thank you.

 

I made a codepen, it's very confusing:

 

 

The onMove and onChange trigger when I move the cursor over the red square, but the onStop only triggers, when I click, move and then release.

 

 

 

See the Pen abPqyza by romaingranai (@romaingranai) on CodePen

[GreenSock]

Sorry about any confusion there, @romain.gr. I've added this note to the docs: 

Quote

Note: pointer-based movement is only triggered while the pointer is pressed unless you have an onMove defined (this is a performance optimization). 

 

And the onStop is also based on movement during pointer presses, but I've improved the next release of Observer to also fire onStop if you've got an onMove defined. You can preview that here: https://assets.codepen.io/16327/Observer.min.js

 

Here's a pretty easy way you can get the behavior you want in the current version: 

See the Pen BavxzdG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? 

[romain.gr]

Hi @GreenSock,

 

Thanks for your quick answer and sorry for my late reply, I had to switch to something else. Anyway, I tried and actually the new version of observer works as expected, I don't really understand the other version, but I'll check about that delayedCall and pause(), at least for another use.

 

Thanks again ;)