Jase Posted August 30, 2020 Share Posted August 30, 2020 I'd be interested in how the cursor dot hover effect is achieved on the Project images. On hover, the cursor dot grows and displays text inside the it. I truly appreciate any help Here's the site link... https://cuberto.com/projects/ See the Pen WNwOWWK by Jase2018 (@Jase2018) on CodePen Link to comment Share on other sites More sharing options...
Richard1604 Posted August 30, 2020 Share Posted August 30, 2020 Hi, I think that you need cursor effects and a masking effects. Try this for the former and I will get back with a link to the latter. Link to comment Share on other sites More sharing options...
Richard1604 Posted August 30, 2020 Share Posted August 30, 2020 Link to comment Share on other sites More sharing options...
Richard1604 Posted August 30, 2020 Share Posted August 30, 2020 Link to comment Share on other sites More sharing options...
Jase Posted August 30, 2020 Author Share Posted August 30, 2020 Thanks so much Richard for your response. I've tried so many examples but the one that pops up the most that is similar to what I want doesn't display the text. It's quite easy to find examples the the dot expanding on hover, but would be great to understand how I can get the text to appear as well Link to comment Share on other sites More sharing options...
Richard1604 Posted August 30, 2020 Share Posted August 30, 2020 Hi, there are lots of nice effects on that site and I think it also depends on the device that is being used. im not sure that I understand exactly what you want to do. it may be that you need to use an event listener to trigger an effect (Eg. on hover) or perhaps you have a text effect in mind (a tween). it would be helpful if you could explain the context in a bit more detail. Link to comment Share on other sites More sharing options...
Jase Posted August 30, 2020 Author Share Posted August 30, 2020 Thanks Richard, I've added a codepen example. See how the cursor dot expands and shows the text 'Watch' as you hover over the image. Link to comment Share on other sites More sharing options...
Richard1604 Posted August 31, 2020 Share Posted August 31, 2020 Hello Jase, live looked at that site with several different devices and I can’t see anything that resembles your code pen. i did originally identify a hamburger menu with the effects that I posted yesterday but that’s obviously not what you are looking for. sorry I can’t be more helpful. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 31, 2020 Share Posted August 31, 2020 Hey Jase and welcome to the GreenSock forums. You can look how they're creating the effect by inspecting the .cb-cursor element in the dev tools on the website you linked to. It uses CSS transitions to animate the opacity of the text and the scale of the ::before element. It also uses JS to update the position to follow the cursor when a project is hovered. Link to comment Share on other sites More sharing options...
Jase Posted March 12, 2021 Author Share Posted March 12, 2021 It seems that cuberto use data-cursor-text in the img link for the text within the dot when on hover. I've seen so many examples in codepen of the classic dot following the cursor but nothing really on how to get text to appear within the dot on hover. Cuberto bundle all the JS up so it's really difficult to decipher which parts are solely for the cursor. Link to comment Share on other sites More sharing options...
Jase Posted March 12, 2021 Author Share Posted March 12, 2021 cb-cursor.mp4 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 12, 2021 Share Posted March 12, 2021 Hey Jase. The thread Richard linked at the top of this thread shows how to do a magnetic effect where the circle changes size. If you take out the magnetic part you're left with just the circle changing size, much like the effect that you're trying to create. The only part left to add is scaling and fading the text and adding the background color animation. We're happy to answer any specific GSAP-related questions that you have. Link to comment Share on other sites More sharing options...
Jase Posted March 12, 2021 Author Share Posted March 12, 2021 Thanks so much for responding Zach. Yes I agree, much of the work has been addressed. However, the part I'm really stuck on is adding the text. Are you able to help with this element? Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 13, 2021 Share Posted March 13, 2021 Which part of handling the text are you stuck on? Link to comment Share on other sites More sharing options...
Jase Posted March 15, 2021 Author Share Posted March 15, 2021 This is what I wanted help with but it's all good now... See the Pen bGBJGpY by Jase2018 (@Jase2018) on CodePen Link to comment Share on other sites More sharing options...
dheep Posted May 1, 2022 Share Posted May 1, 2022 @ZachSaucier or @mikel or greensock team, Would you please let me know how to set fixed magnetic on hover color, In the forked code pen below See the Pen BaYaJvp by prad1490 (@prad1490) on CodePen , If background tile changes On hover dynamically reflects different color. Thanks in advance. PS: In attached file, magnetic hover color is turned to violet, How Can I change it to say fixed color like white color background magnetic circle with black text. Link to comment Share on other sites More sharing options...
GreenSock Posted May 2, 2022 Share Posted May 2, 2022 Hi @dheep. Welcome to the forums. We don't have the resources to provide free general consulting or "build to order" solutions (please read the forum guidelines), but we'd be happy to answer any GSAP-specific questions. That demo has over 16,000 lines of JS code alone, so it's way beyond the scope of help we can provide for free here. You can either post a minimal demo with a GSAP-specific question or you're welcome to post in the "Jobs & Freelance" forum for paid assistance. Good luck! Link to comment Share on other sites More sharing options...
dheep Posted May 3, 2022 Share Posted May 3, 2022 Hi Team, Thank you for quick response. I found the solution by unsetting mix-blend mode property and with some conditional class name properties with z -index. 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