Jase Posted April 17, 2021 Share Posted April 17, 2021 I'm trying to find a way of forming the magnetic area for the circle on this GSAP magnetic cursor. Currently the area is only within the square box with the dotted outline. I want to make the whole grey section the magnetic area. Ideally I want the circle to ‘become’ the cursor when you hover over the section. See the Pen xxgJyPM by Jase2018 (@Jase2018) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted April 18, 2021 Share Posted April 18, 2021 Have you tried making the box bigger? Link to comment Share on other sites More sharing options...
Jase Posted April 18, 2021 Author Share Posted April 18, 2021 haha, good question! Yes I have, but as the area is using negative parameters I'm not sure how to fill the section. The idea is that the section will contain an embedded youtube video, and the round button will be used to play and pause the video. Ultimately I'll need this button to toggle text values of 'play' and 'pause'. Link to comment Share on other sites More sharing options...
OSUblake Posted April 18, 2021 Share Posted April 18, 2021 I'm still a little unsure what all that nesting is for. See the Pen 30231603235aa1915bb92311a048ef16 by osublake (@osublake) on CodePen 2 Link to comment Share on other sites More sharing options...
Jase Posted April 18, 2021 Author Share Posted April 18, 2021 Me neither. I found the example on a random codepen. Thanks very much for your help Blake, this makes so much more sense to me now Link to comment Share on other sites More sharing options...
Jase Posted April 18, 2021 Author Share Posted April 18, 2021 After your kind help Blake, here's the project in progress. I just need to embed youtube video into the container, then link the button to it See the Pen zYNLQaM by Jase2018 (@Jase2018) on CodePen 2 Link to comment Share on other sites More sharing options...
Jase Posted April 18, 2021 Author Share Posted April 18, 2021 @OSUblake Sorry Blake, I have another question. Is it possible for the ball to interact with the cursor on scroll? At present the cursor has to move before the ball sticks to it. Link to comment Share on other sites More sharing options...
OSUblake Posted April 19, 2021 Share Posted April 19, 2021 Unfortunately, there's no way to get the mouse position without a mouse event firing. You could try keeping tracking of the mouse position and using scroll events to manually update the position, but it sounds like it might get complicated. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now