Sliding effect on "mouseover"

[acarchi 0 Likes (Newbie)]

Hello everyone,

 

I'm struggling to achieve the following sliding effect :

When my mouse is over a box, I want that box to appear with a sliding effect. Right now I'm using TimelineLite, animating the "width" from 0 to 100px, as shown in the Jump start guide.

 

The problem is I can't have the mouse over a 0px box...

 

It works when I include this box in a div, I can now have the mouse over the div. BUT as soon as the box appears at 100px, the mouse isn't anymore over the div but over the box, resulting in an unwanted mouse out, looping the animation...

 

Does anyone have got some suggestions to achieve this effect properly ?

 

Thanks a lot !

[Jonathan 5,176 Likes (Superhero)]

Hello acarchi, and Welcome to the GreenSock Forum!

 

I'm a little confused on what you are seeing. To better help you since it is hard to see the functionality without some code for context. Could you provide a code example?

 

Here is a nice video tut by GreenSock on How to create a codepen example demo.

 

This way we can help you better by testing code we can edit, live.

 

We all are willing to help, it is just we need to see your code in a live editable environment to see the code you have tried, and the behavior you describe.

 

Thanks

[acarchi 0 Likes (Newbie)]

Of course, I understand. I'll try to clean the code an upload an example. Cheers !

[acarchi 0 Likes (Newbie)]

Here is the code. I want to have the image appearing with a sliding effect when the mouse is over it :

 

See the Pen JmnLe by anon (@anon) on CodePen

[Jonathan 5,176 Likes (Superhero)]

Ok.. thanks .. it's a real help!

 

From what i see.. your trying to hover over an element when it's width is set to zero. The best way is then to just have the hover event trigger when you hover over the images parent.

 

Modified your example here:

See the Pen hxanF by jonathan (@jonathan) on CodePen

$(document).ready(function() {

   // uses autoAlpha instead of opacity        
   $(".hiddenElement").css("autoAlpha", 0);
   $(".hiddenElement").css("width", 0);
	
   var tl = new TimelineLite();
	
   $(document).on("mouseover", ".content", function(evt){ 
          // uses autoAlpha instead of alpha        
	  tl.to($(".hiddenElement"), 0.5, {width:"200px", autoAlpha:1});
   }).on("mouseout", ".hiddenElement", function(evt){        
          // uses autoAlpha instead of alpha        
	  tl.to($(".hiddenElement"), 0.5, {width:0, autoAlpha:0});
   });

});

In your case you set opacity using GSAP .. and then your animating alpha which is perfectly fine.

 

But GSAP has a nice special property when animating CSS opacity.. it's called autoAlpha, found in the CSSPlugin Docs: ( taken from docs )

 

autoAlpha - the same thing as "opacity" except that when the value hits "0", the "visibility" property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, "visibility" will be set to "inherit". We don't set it to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

 

Examples of using autoAlpha:

//fade out and set visibility:hidden
TweenLite.to(element, 2, {autoAlpha:0});
 
//in 2 seconds, fade back in with visibility:visible
TweenLite.to(element, 2, {autoAlpha:1, delay:2});

Does this help? .. 

[acarchi 0 Likes (Newbie)]

Hello Jonathan,

 

Thanks for the clear explanations about the autoAlpha, it solved the looping animation problem. However, I'm still not totally satisfied with the animation :

If you hover quickly and a multiple times the animation, it will keep on being triggered even if the mouse is not over it anymore.

 

Do you have any idea how to prevent that ?

[acarchi 0 Likes (Newbie)]

Also I see you canceled the "this" element, which was necessary in my project.

[Jonathan 5,176 Likes (Superhero)]

Hello again.. The 'this' was referencing .hiddenElement, but since the hover event is being triggered on its parent .content.. you cant use 'this', since it would reference .content element. So we want to use .content as the trigger to make its child .hiddenElement animate in and out ..

 

To prevent the animation to continue when not hovering.. you can declare the 'tl' var for a new TimelineLite() in each hover in and out.

 

Modified example:

See the Pen InlAy by jonathan (@jonathan) on CodePen

 

Does that help?

[acarchi 0 Likes (Newbie)]

That does not help. That solves. Thanks a lot !