Search the Community

Hi community, need some help. I'm facing a problem in setting up a custom cursor for my page in Next.Js. My cursor should only work for certain blocks - it is not visible on all other blocks. I managed to make the cursor itself, but I ran into a problem. I have a problem with initializing the appearance of the cursor when scrolling the page. That is: when I see my cursor and start scrolling up, my custom cursor will be visible on other sections (where it shouldn't even be) until I stop scrolling and move the cursor. I want it to initialize in my block correctly Here is an example where I think this works well (work block): https://www.fhoke.com/ And here is my demo. Here on the first block there is no cursor, on all other blocks there is. You can catch my error this way, start scrolling down the page from the first block and the custom cursor will not be visible until you stop scrolling and move the mouse. It works the same way in reverse https://codesandbox.io/p/sandbox/custom-cursor-chthqm?file=%2Fsrc%2FApp.tsx%3A24%2C11

Hello! 👋🏻 GSAP you are the best! I would be very grateful if you could help get this animation when hovering the cursor changes text and color as well as text as if inside a circle. I've been looking for a very long time for a solution but couldn't find one. Thank you very much in advance!

Hey Guys, I am trying to create a custom cursor with gsap. My site is horizontal scroll based as you can see in the codepen demo. The problem is whenever I am scrolling the cursor also moves up. How can i stop this from happening and make it behave just like a normal cursor. I am working in Next JS with the cursor being a separate component. Please help me. Thanks alot

I'm trying to create something like if I hover on a particular section my cursor will change. I've linked my CodePen that I tried. In my case, when I'm hovering over the "show" section I'm getting the custom cursor. But when I'm moving the pointer to another section the custom cursor is not getting hidden. Also when I'm hovering over the "show" section the custom cursor is revealed from the top left corner of the page. But I need the cursor to sync with my mouse pointer. Like when I'm hovering over the section the custom cursor should reveal from the mouse location. And here is a short brief of what I've done on my code. I use "scale-0" to hide the custom cursor Initially. When I'm hovering over the "show" section I've changed the "scale" value to "1" to reveal the custom cursor. And "onMouseLeave" I've changed the scale value to "0" again to hide the custom cursor again. (Note: I'm not sure why the "Custom cursor" is not hidden initially on CodePen)

Hello, I've seen this effect on few websites -> cursor has a transparent radius around itself, that when it hovers over a text, the part of text that is "inside" the radius loses it's fill color and only outline remains. I am a somewhat of a beginner, and I am very curious how this works because I'd love to implement it myself. If there is someone that could atleast point me in right direction, to help me figure this out I'd be very thankful. I've also found codepen that is kinda similiar but the principle is a bit different, to my understanding it can only be used on a flat color background, but on the websites that are linked below, this effect is used with picture/photos as background. Here are some websites that are utilizing this effect: https://maxilla.jp/ https://www.alexthery.com/

Hello! Help with advice on how to get started with SVG. I have a SVG web, and I want its center to stick to the mouse cursor with an elastic effect, and when leaving it, spring back to its original position. Or is it impossible to solve the problem with such an SVG? Thank you in advance! https://codepen.io/cnqftxxr-the-looper/pen/ZEwyjVL

Hi There, I need help regarding to create a slider which I defining below : I want to same functionality as like this screen shot (https://prnt.sc/lu4qnBnOiLXP) Is it possible with GSAP if yes please guide me what step I need to follow. https://greensock.com Thanks

Hello Rohit this side, I am a frontend developer from India can you please guide me on how to start working on making a website like Awwwards and I want to learn more. It will be a great opportunity if you help me out.

Hello - I have a code for a custom cursor, and the cursor, which is a ball/circle, was supposed to grow/scale when hovering over a link, if you see the code below, this function is there, but it is not working, does anyone know what's wrong? Thank you in advance. The code is from codepen. I am using the following code, everything is working, except the hover thing I mentioned. div class="cursor"> <div class="cursor__ball cursor__ball--big "> <svg height="30" width="30"> <circle cx="15" cy="15" r="12" stroke-width="0"></circle> </svg> </div> <div class="cursor__ball cursor__ball--small"> <svg height="10" width="10"> <circle cx="5" cy="5" r="4" stroke-width="0"></circle> </svg> </div> </div> <style> body .cursor { pointer-events: none; } body .cursor__ball { position: fixed; top: 0; left: 0; mix-blend-mode: difference; z-index: 1000; } body .cursor__ball circle { fill: #f7f8fa; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> <script> const $bigBall = document.querySelector('.cursor__ball--big'); const $smallBall = document.querySelector('.cursor__ball--small'); const $hoverables = document.querySelectorAll('a'); // Listeners document.body.addEventListener('mousemove', onMouseMove); for (let i = 0; i < $hoverables.length; i++) { if (window.CP.shouldStopExecution(0)) break; $hoverables[i].addEventListener('mouseenter', onMouseHover); $hoverables[i].addEventListener('mouseleave', onMouseHoverOut); } // Move the cursor window.CP.exitedLoop(0); function onMouseMove(e) { TweenMax.to($bigBall, .4, { x: e.clientX - 15, y: e.clientY - 15 }); TweenMax.to($smallBall, .1, { x: e.clientX - 5, y: e.clientY - 7 }); } // Hover an element function onMouseHover() { TweenMax.to($bigBall, .3, { scale: 4 }); } function onMouseHoverOut() { TweenMax.to($bigBall, .3, { scale: 1 }); } </script>

Hello everyone, is it possible to implement the filling of the button on hover, from the point where the cursor came from? Let's say if from bottom to top, then the animation will go from bottom to top of the button and so on. I would be glad if someone shows the implementation at least from two sides. Thank You!

Sorry guys, I finally found a way to reveal a div with a custom cursor. The thing is the mask is not moving enough. If you move your cursor you can see the circle stays away from the current position of the cursor. Is there a solution to fix this? Thanks a lot!

I'm a beginner and with some effort I managed to do this project, however, at the time of implementing the tests, I started to see that TweenMax has vulnerabilities. Can anyone help me refactor this code to an updated version with no vulnerabilities?

Hello, I've been looking for a way to keep my cursor as a grab when the item is not been dragging and to grabbing when the item is being dragging but then come back to grab when the user stop dragging the item. I don't know if I was clear but it's similar to this cursor action: http://fetedelabiere.promo-agency.com/ Here's part of my code where I managed to make change the cursor when the drag starts but not when the user stops Draggable.create(div1, { type: 'x,y', bounds: parent, edgeResistance: 1, onDrag: function() { childX.html(this.x); childY.html(this.y); } }); Draggable.get("#div1").vars.cursor = "grabbing";

Hey guys, I'm having a couple of issues with animating a cursor. The aim is to have the cursor smoothly snap into position when entering a box and smoothly animate back to mouse position on leave (rather than jump to the new mouse position). Also, the cursor should smoothly animate when moving from one box to the other quickly. 1. How would I go about animating the cursor smoothly back to the mouse position after leaving the box (not sure how to store the mouse position while active = false. 2. When moving from one box to the other quickly, how would I prevent the cursor from jumping/flashing back, just before it locks into the new position. Hope this makes sense. I feel like both issues are related to storing the mouse position while the fixCursor function is running? but still unsure how to make it animate smoothly. Any help is greatly appreciated. Cheers

Hi, Id like to know if there is a GSAP function that can create the effect of a mouse following the cursor

Hello ! I use this resource and it works pretty good but the hover animation freezes on scroll. Any Idea to solve this ?

Hey there ? I have no real idea of what I'm doing when it comes to javascript, but I'm totally hooked on the interactions and animations that are possible when using it. And today I discovered GSAP, which seems to tie all that stuff together very nicely. So here I am asking for help, trying to implement GSAP into my most recent 'Project'. What I'm trying to do is replicate an interaction on the Wieden + Kennedy home page. The closer your cursor gets to the featured project title (lower left of the screen) the more it's underline grows. When the cursor reaches the project title, the underline reaches it's full length, and underlines the project title. I'll also point out that it doesn't matter where your cursor is hovered on that featured project title, the underline stays at it's maximum value. (Something I've been having trouble figuring out) [It's definitely easier to see this in action than to read my crappy explanation of it, so it might be worth clicking the link up there] Phewf. After piecing together sections of code from around the web, and before I discovered GSAP. This is what I had. https://codepen.io/samuelhigginson/pen/MWKBjJm It's.. kind of something that works? But there are a couple of things that aren't quite right. My line starts to get going as soon as the cursor enters the viewport. On W+K's page there seems to be some kind of 'Trigger Div' which initiates the interaction. My line only reaches 100% when the cursor is exactly in the centre of the Project Title. W+K have a much more satisfying 'Hover anywhere on the Project Title' thing going on. If the window resizes, the distances change and things go wrong. And the final difference I can spot, and what ultimately led me to GSAP. That delicious easing. My lines width is a scaled replication of the cursors distance from the Project Title. What W+K have, is a buttery smooth, slippery sliming line. And I'm all about that. So I got to googling and came across this post, here on the GreenSock forum. I noticed some similarities between the solution offered there and what I had going on, so I forked the pen and started trying to merge that solution with my own. And I ended up with this. https://codepen.io/samuelhigginson/pen/LYGgaab?editors=1111 Not great. But.. not totally disgusting? I know I've probably over complicated this massively, and my approach and calculations are probably way off. But this is all my perfectly smooth brain can manage, for now. So I'm reaching out to you people with the GreenSocks and asking for help. Anything you can suggest to get this little line dancing would be greatly appreciated. Cheers.

Hiya everyone. I am new here but really hoping someone can help me out as I would love to use this amazing library to achieve this cool effect just posted on codrops; (https://tympanus.net/codrops/2020/07/01/creating-a-menu-image-animation-on-hover/). You'll see in the article it explains that the effect works on the direction of your cursor - actually it has two effects, one for when the image is revealed/hidden and the other for moving the mouse over the nav title. I'm trying to adapt the direction based element of this effect into a Webflow project and I am struggling with this because the tutorial seems to go the long way round of achieving these effects (see the layout at the start of the tutorial) and also the fact that there are multiple JS files created. I am fairly new to js and also GSAP (love it though) so a lot of this is a bit overwhelming and also makes it very hard to achieve using Webflow but essentially I would like help with these two directional based effects on hover; 1) I just want to reveal and hide elements on hover with the direction dependent on the mouse direction 2) moving the mouse to the left rotate's the image to the left, and to the right it does the inverse. If anyone is able to offer me help I would hugely appreciate it! Thanks so much

Hey, I've seen this animation when hovering but I have no idea how to do it. Perhaps someone can help me with this please? Hover.mp4

Hi Greensock lovers, How can i achieve this (https://codepen.io/labdev/pen/amyyyw) with Greensock 2Dphysics? And as extra I want to have a cursor hover function. Basically when you hover with your cursor the "object" should be pushed somehow. Thanks. Fatih

Hi, new to these forums. I have a html5 banner I created in Animate for DCM with a click tag. Everything works fine, the link works if you click the banner, it validates in DCM html checker, but when i view the banner in a browser the cursor doesn't change to the hand/pointer cursor like it does on all links, banners. Any idea why this would happen? Any help would be much appreciated! Thanks!

Hey guys, Is it possible to tween the cursor css property? I've got a div on my website that expands on hover, and I'd like to change the cursor when it expands so that you know to click on it to do more. So, is it possible to tween the cursor property? I've attached a codepen that's a basic example of what I'm trying to do.

Hello, I've changed my cursor to grabbing while it's grabbing the object but i'm having troubles to return to the cursor 'grab' after I drop the object. Any tips on that? Here's my code so far: Draggable.create(div1, { type: 'x,y', bounds: parent, cursor: "grab", edgeResistance: 1, onDrag: function() { childX.html(this.x); childY.html(this.y); } }); Draggable.get("#div1").vars.cursor = "grabbing";

I am using TweenLite.to to change a path when a clipped svg is hovered. I change the cursor on mouseover event (which triggers the Tween). I would like to "reset" the cursor (to default) when the tween is done, but tween seems to be modeless, so execution follows downstream. How can I handle this? thanks