Search the Community

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, amazing tweenmax, really amazing, days of glory!! =) I'm doing some tests: http://codepen.io/gerryAB/pen/noick But I can't , at the end of #abs tween (timeline) is calling a funciton to detect from which side the mouse is enter, and then animate: If mouse enter from top: tween top:100 if left: tween left to right, botom and right In the if mouseenter the Tween is cycling, there is and error, how can I fix it? And how to detect the side and then apply the tween I want that #caption-abs make a tween from the side where the cursor has entered

I not sure this is the right way to do it or not, basically what I want to do is when hover over the div, the paragraph will move down and the title will turn green with class added to it. then when hover out the exact reverse will occur. My problem now is that when I hover over and out multiple times swiftly and land my cursor within the div, the mouseenter animation will not trigger, but when I move my cursor out again and move back in then it will back to normal... What seem to be the problem actually? Here is my code: http://codepen.io/vincentccw/pen/rpIgD

http://codepen.io/vincentccw/pen/svBte This is the code I'm using: /////////////////////////////////////////////////////////////////////////////////////// var hoverEffect = new TimelineMax(); $('div').on('mouseenter', function(){ hoverEffect.to($(this), .2, {top:"-=20px",ease:Quad.easeIn}); }).mouseleave(function(){ hoverEffect.to($(this), .2, {top:"+=20px",ease:Quad.easeOut}); }); /////////////////////////////////////////////////////////////////////////////////////// On first hover, the div straight away jump into the end and skip the animation but when hover the second and third time, it goes back to normal.... I also noticed that when I place my variable inside the mouseenter function it fixes the problem but is there anyway that I can place the variable outside the function?