Jump to content
GreenSock

anteksiler

Mouse pointer interaction

Recommended Posts

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • 1 month later...

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

Link to comment
Share on other sites

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  */ };
});
  • Like 1
Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

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

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

 

:)

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×