Mouse pointer interaction

[anteksiler]

Hi everyone, is there any examples that utilize user's mouse to modify element animations using GS? Best example would be animations three.js

[GreenSock]

Not exactly sure what effect you're looking for, but all the Draggable examples (http://greensock.com/draggable/) use mouse interaction, and if you search codepen I'm pretty sure you'll find some demos that leverage GSAP and THREE.js. 

[stevenha]

I'm new here.  I'm also interested in "When the mouse is hovering near- or moving toward- something"  ( not onHover event ).  Like, as mouse moves toward the nearest H2 heading, the text does a subtle stagger animation.  I'm not a professional coder, I just learned the difference between Pointer events, Mouse events and Touch events recently.  I know it's possible to learn and code this with javascript and jQuery by hand, but I'm hoping someone has made it easier already.  Does anyone have some examples, mouse-watching without click-triggering

[Diaco]

Hi stevenha  , welcome to the GreenSock forum .

 

actually we have to keep our support focused on GSAP api .

 

anyway , you can try something like this :

var elem = document.getElementById('myDiv') ,
    elemBCR = text.getBoundingClientRect();


document.addEventListener('mousemove',function(e){
  var X = e.pageX-elemBCR.left , Y = e.pageY-elemBCR.top ;
  var Distance = Math.sqrt( X*X + Y*Y );
  console.log( Distance );
  if( Distance < 250 ){ /*  your tween or whatever  */ };
});

[OSUblake]

Hi @stevenha

 

Instead of doing a calculation on every mouse move, you can put an HTML or SVG element inside a transparent container, and then set that container to handle events. This will trigger the event when you are within a set proximity of the element. Look at how the blue circle starts to animate before you are hovering over the actual point.

 

See the Pen OyJVzN by osublake (@osublake) on CodePen

 

[Jonathan]

stevenha here are some resources you might find useful for hover events in javascript:

• mouseenter: https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter
• mouseleave: https://developer.mozilla.org/en-US/docs/Web/Events/mouseleave
• mouseover: https://developer.mozilla.org/en-US/docs/Web/Events/mouseover
• mouseout: https://developer.mozilla.org/en-US/docs/Web/Events/mouseout

Difference between mouseenter  vs mouseover .. or ... between mouseleave  vs mouseout .. is that mouseenter  and mouseleave  do not use event bubbling, and act similar to the CSS psuedo-class :hover

 

Types of events:

 

http://www.quirksmode.org/js/events_mouse.html

http://javascript.info/tutorial/mouse-events