Search the Community
Showing results for tags 'mouseleave'.
Found 12 results
-
My goal is to get the yellow arrows, after they are done with their initial timeline, to react to mouseenter and mouseleave. When I try to set AddEventListeners nothing works and if I comment them out, only the first timeline runs. I am pretty sure that I need to call the 2nd timeline from a function when the first timeline runs but that's a different thing. When I comment out the 1st timeline the 2nd timeline runs no problem. But if I uncomment everything out nothing works. Am I even approaching this in the right way? I should be able to run a timeline on a mouseEvent yeah? I've taken @carl advice and have tried to make the codepPen as stripped down as I could. Let me know if that's' still too much or not enough. TIA, Diza
-
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
-
Hello, Scenario: While moving the mouse the red color box should move and scale. On mouse leave should go back to original. Problem: After mouse leave also it is not resetting, I mean it is not going from scale 1.2 to 1. Also it is very slow transform. please help me.
-
Hi I'm trying to achieve the underline animation on links you can see on this site https://details.ch/en (click hamburger menu icon on top right to see it). Also you can check out my attached gif where I show you the various animation cases (on mouseenter and mouseleave) I need to develop. I need to achieve the exact same interactions and animations you see. It's like I'm not able to handle the relationships between the mouseenter animation and the mouseleave animation. Someone could help me? Thanks
-
Hi, I'm having a issue with TimelineMax. I've created a timeline that opens and closes the drawer in my navigation. It works, but eventually if the first time I move the mouse above the navigation elements (that triggers the animation), one of the timelines doesn't work anymore. I'm executing the timeline on mouseenter triggered by the main navigation items. Then I'm playing the timeline reversed when it's triggered a mouseleave by the container of the entire navigation. You can see the working example in the following video (password: codepen). The problem happens when I move quickly the mouse over the navigation items. I managed to film it in this video (password: codepen) And here the video that shows the error (password: codepen)
-
Hello, I have a button. When a user hovers over it then blue overlay will come and slide from left to right and stop until the mouse leaves. There is no issue here. It's working. Now If the user removes the mouse hover then I have to end the blue overlay from left to right and It will come on the normal button. When I remove the mouse hover it's going to the right to left side. Also when hover on the button "How can I change the color of text and arrow"? Thanks in advance.
-
Hi all, I've been wanting to try out a new hover animation for a button. Basically, I'm wanting a generic SVG to be hidden above the button. Once you hover over it, it should animate down until it covers completely and pauses. When you hover off, it should continue to animate down until it is out of sight. My problem is that when you hover off and it animates out of sight, I can't get it to start over/repeat every time you hover over it. I've tried multiple ways to get it to work and have failed. The pen I added for this topic is the simplest/cleanest version I have. Any help is greatly appreciated!
-
Hi GreenSock, Is there any topic (codePen) with the effect shown in this pen? I need this effect to work for every elelement of a large gallery. Thanks!
-
Hi all, I am very new to hand coding and using GSAP and have just got the hang of the basic principles of the tweens and timelines. My problem is I would like to animate a half background during the timeline and after its completed add a mouseenter that animates the same background to the full height. The issue is if the mouse enters before it gets to the timeline it animates the background in, it breaks the mouseenter and does not behave as it should. To replicate check the codepen. Mouseenter before the black half background animates in and it will complete the whole mouseenter function. To see the desired result. Refresh the codepen and do not mouseenter until the black half background animates in. Then mouseenter. Is there a way I can a. add the mouseenter mouseleave functions after a certain point in a timeline? b. use a check else if statement to see if mouse has already entered and still has not left play the rest of the mouseenter animation ? Sorry this is my first post so hope this information and the pen makes sense. Thanks for any advice or help in advance, Chris
-
hi i want these actions to occur when the mouse enters in class of "block-detile" the width of "line-type" reduces , the "text-type" moves left and "text-info" appears and when mouse goes to another side, return to its main states
-
I am trying to animate a rotating SVG, but I have two issues: on mouseEnter sometimes the animation "jumps" when I try to mouseEnter/mouseLeave several times, the animation get slower/faster and sometimes it stops completely I am not sure if this issue is due to the fact that I am not using a timeline, but I cannot use it easily because I have a complex animation. Is there a solution without using a timeline?
-
Hi everyone, in simple words here is what I'm trying to achieve: Start an infinite animation when the user hover a div Pause the animation when the user leave, but after the animation is completed. I recreated a codepen as you can see, when I go out of the svg, the animation goes to the end but after it doesn't start anymore. ps: I tried to add play(0) but it will play once (probably because of the callback onRepeat) EDIT: while posting I had an idea and looks like it works I just remove the onRepeat callback on the mouseEnter in this way: $("svg").hover(function() { hoverDog.play(); hoverDog.eventCallback("onRepeat", function(){}); }, function() { hoverDog.eventCallback("onRepeat", function(){ hoverDog.pause();}); });
(Small)(1).thumb.jpeg.15e42ae49445b8bada9d0a027e685017.jpeg)
