Jump to content
Search Community

Follow by mouse

wneet test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey @OSUblake, I like the idea, but I've tried selecting the heading and it acts very weirdly even if I put pointer-events: none; to .ball

Also: how would you make the ball visible only when the mouse if on the viewport?  Seeing it visible on the window border is not really appealing.

And what would happen in mobile devices, is it better to completely remove it?

 

Link to comment
Share on other sites

1 hour ago, heyitsA said:

Hey @OSUblake, I like the idea, but I've tried selecting the heading and it acts very weirdly even if I put pointer-events: none; to .ball

 

Not sure what you mean. Need to see a demo.

 

1 hour ago, heyitsA said:

Also: how would you make the ball visible only when the mouse if on the viewport?  Seeing it visible on the window border is not really appealing.

 

Hide it when it leaves the window, or when it's a certain distance away from an edge.

 

1 hour ago, heyitsA said:

And what would happen in mobile devices, is it better to completely remove it?

 

What is a mobile device? Most Windows laptops and Chromebooks have touch and mouse inputs. I wouldn't show the ball until there is a mouse event.

 

See the Pen 3170174f4ce844f78c7789a279f8e50e by osublake (@osublake) on CodePen

 

 

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

Thanks, @OSUblake.

Trying to do one more thing. I am relatively new to js so don't know how to achieve the next codepen.

See the Pen KKMmVOW?editors=0010 by esadrian (@esadrian) on CodePen

 

I know the logic must be something like substract the scrollTop and calculate elements width and height and the relative position of the mouse, but I don't know how to fit it with your demo.

 

var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var boundingRect = jsF.getBoundingClientRect();
var halfDiff = Math.abs(boundingRect.width - boundingRect.height) / 2;
var relX = e.pageX - boundingRect.left - halfDiff;
var relY = e.pageY - boundingRect.top;

x: (relX - boundingRect.width / 2),
y: (relY - boundingRect.height / 2 - scrollTop),

Also, is the timer being used in your previous demo?

var timer = gsap.delayedCall(5, () => {
  showAnimation.reverse();
}).pause();

 

Link to comment
Share on other sites

Hey @ZachSaucier I wrote it here because these were two different examples. The other one has a "magnetic area" and this one's area is the whole section. But maybe it's as you say it's better to gather both on one function and determine if there is an explicit magnetic area take that and if not, the previous container. Sorry if it was an inconvenience.

Link to comment
Share on other sites

  • 1 year later...
  • 6 months later...

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.
×
×
  • Create New...