Animated Hover In/Out from List Menu

[cr33ksid3]

I've seen this effect on various sites in the past. I'm sure it can be done with GSAP... I just haven't been able to make it work yet. So, I have a list menu and I have an SVG set using TimeLineMax. The goal here is to get the animation you see to animate and appear upon hover... pause while you are still on the nav element... then have the oval move forward and fade out while the rectangle drops and fades out as well. Sounds easy right? Not for me yet. I also have some goofy CSS thing going on with the last nav element not showing the hover due to the SVG animation. I've tried clearfix but that didn't fix it. Help this old dog learning new tricks please... much appreciated...

 

Graphics are quick and dirty right now... eventually the rectangle image will be a fence and the oval will be a horse jumping... its for my wife

See the Pen ExxBWzN by cr33ksid3 (@cr33ksid3) on CodePen

[ZachSaucier]

Hey Mike,

 

You're wanting the oval to be behind the hovered nav item, correct?

 

In that case it might be better to not  use a timeline and just use tweens.

1. When the nav is hovered, .set() it to whatever initial state you want it to be in (maybe right of the nav, based on what you have in the demo?).
2. Animate it .to() the position of the hovered navigation item.
3. If another nav item is hovered, do the same thing as the above item.
4. When the nav stops being hovered, animate it out however you need to.

Does that make sense?

 

As for the rectangle, I'm not sure if you want a different one to appear when every nav item is clicked or at some other point in time.

[cr33ksid3]

I used a timeline because the rectangle (fence) needed to fadein from below and the oval (jumping horse) needed to fadein from the right... then hold their position and opacity while you are hovering over that nav element. Then when you release the hover the oval should fadeout to the left and the rectangle fadeout moving down. All behind the text of the nav element.

 

Are you saying to use TweenMax because each animated sequence appears one after the other and not two or more animations at the same time (needing two or more timelines)? I guess I'm not sure why you're suggesting TweenMax instead of TimelineMax.

 

And why would the animations mess with the last navigation element's (About link) hover state? Or is that a CSS issue that needs to be fixed?

 

Oh, and my SVG exists right now in the HTML panel. Another thing I'm not sure about is do I separate each piece of the current SVG into their own parts? Rather than call the whole illustration and just move the pieces? If I separated them, I could call them from CSS and remove the group from HTML. I thought it was best to keep the illustration together and just manipulate the pieces. However, I am not sure how to use but hide them from site in the HTML panel since I am only going to use them for the navigation.

 

So many questions... Thanks for the quick reply

[ZachSaucier]

17 minutes ago, cr33ksid3 said:

Are you saying to use TweenMax because each animated sequence appears one after the other and not two or more animations at the same time (needing two or more timelines)? I guess I'm not sure why you're suggesting TweenMax instead of TimelineMax.

I'm saying if you need to move the oval between navigation items (Home, News, etc.) then you'd be going a fraction of the timeline to go between each one. It'd be easier to just use tweens. 

 

18 minutes ago, cr33ksid3 said:

why would the animations mess with the last navigation element's (About link) hover state? Or is that a CSS issue that needs to be fixed?

If you right click and try to inspect the navigation you can see that the SVG is currently covering the navigation. So the hover events are being fired on the SVG, not the nav. You can fix that by setting pointer-events to none for the SVG or positioning the SVG behind the navigation.

 

19 minutes ago, cr33ksid3 said:

do I separate each piece of the current SVG into their own parts? Rather than call the whole illustration and just move the pieces?

Not sure what you mean by "call the whole illustration and just move the pieces". Having them in the same SVG or different SVG depends on how they need to be related. From what I can tell it makes sense to separate them but I am having trouble understanding how the rectangle fits in with the circle and how the circle is supposed to move because you didn't answer my questions in my last post. 

[cr33ksid3]

I'm going to have to think about this one a bit more I think. Getting busy this afternoon and hard to focus...

 

ZS: "I'm saying if you need to move the oval between navigation items (Home, News, etc.) then you'd be going a fraction of the timeline to go between each one. It'd be easier to just use tweens. "

 

Either you understand me or I don't understand you... the animation doesn't cross the whole nav bar. The animation is a tiny sprite that appears behind the text of each nav element during the hover state. Instead of the black background color change (or along with it). One site (and I couldn't find it) had a star that scaled, faded in, and did a 360 into place when you put your mouse over the nav element. Then it spun and faded out in the opposite direction as you removed the cursor. It was quick and would repeat as you hovered over the other nav elements. They made it appear using a class I believe.

 

I will look into the "pointer events" mentioned above. It is an annoyance right now but not as important as the rest.

 

What I call "the whole illustration" is the "Jumping-Fences" SVG file. In that SVG are two parts... the "fence" (or rectangle) and the "jumper" (horse or oval). Is that SVG file needed in the HTML panel? As a whole or as individual SVG pieces the oval and rectangle? It seems to get in the way of the nav bar and cause issues.

 

Or would it be better to reference the "whole" SVG in CSS to manipulate? Or even as a rectangle SVG and an oval SVG individually?

 

I've seen other CodePens that have infographic like illustrations that have parts of that whole animated. They aren't trying to use it as a navigation hover effect though

[ZachSaucier]

Is something along the lines of this what you're wanting? It's what I've been trying to describe thus far.

 

See the Pen XWWLEYy?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

[cr33ksid3]

Sorry but no. Closest I could find quickly was something like this...

See the Pen yaNwxy by robertamesbury (@robertamesbury) on CodePen

Only this person just uses CSS... mine would use GSAP of course...

 

If you have the bounding box of the single navigation element... when you hover over that element... a tiny icon of an SVG fence (rectangle in my demo) fades in from the bottom of that element bounding box and an SVG image of a horse jumping (oval in my demo) fades in from the right to land just above the fence. I wouldn't necessarily have the black hover box behind it all but if it didn't hurt that would be fine too. As you remove your focus and not hover over the nav bounding box, the animation should proceed to move the horse icon fading off to the left followed by the fence fading off the bottom...

 

The example above does something similar almost... as you hover over the bounding box, the stairs build up to the door and the light comes on... as you remove your focus or hover... the light turns off and the stairs retract. Only thing missing would be a word  to identify the navigation over the top of the animation.

 

I will look through my history at home. Maybe I can find the example that I saw. It was awhile back but I haven't cleared that cache yet. I will get back to this project... thanks for your patience with me...

[ZachSaucier]

You'll have to create a demo that actually represents what you're trying to do then because I have no clue at this point  

[cr33ksid3]

Back to this after a long night of trial and error... I went back to the drawing board... created something a bit more simple. My goal was to get an SVG to show up in the list menu behind the link text. Should be simple right? Not for me. I did find an example that led me to another example and then another... putting all 3 together I came up with a rotating red start in this CodePen...

See the Pen vYYoOXj by cr33ksid3 (@cr33ksid3) on CodePen

 

And now that I have the spinning red star working... I want to go back to my original project and animate a horse jumping a fence... The fixed CodePen at the top of this thread now... The timeline and spinning animation work but now I need to figure out how to separate the two elements of the SVG #fence and #jumper and have them animate like I mentioned various times above...

 

From here now... The SVG #fence (the fence portion of the combined) should fade in from below and settle into place while the #jumper (the horse and rider) should fade into place from right to left and settle into place as you hover the navigation element. Much like they spin and settle into place right now.

 

When you remove your focus from that hover element, the #jumper should continue to the left and fade out while the #fence should drop and fade out. They currently just spin and fade out together.

 

How would you approach this if you understand now what I am trying to achieve?

[ZachSaucier]

First of all, thanks for the new demo! That's much more clear what you're trying to do.

 

16 minutes ago, cr33ksid3 said:

How would you approach this if you understand now what I am trying to achieve?

I would create a timeline animation for each hover item (like you currently are) that does whatever you need it to do on hover.

 

Then, depending on what you want, you could just have the whole thing play through or tween part of it and play the rest of it when un-hovered (like what play2 is currently doing). To do the partial play through a timeline, you can use GSAP's .tweenTo() with a label as the parameter

[cr33ksid3]

One of my original questions from the beginning has been... Do I use the "horse-jump.svg" file with elements combined or save out the individual <g> elements for #fence and #jumper as their own separate files to make this work the way I mentioned above? Right now I reference .animSprite in CSS which uses the "horse-jump.svg" as the background property. With my current design, I haven't figured out how to take that .animSprite and use the individual <g> elements in the SVG. This demo is much closer and much clearer to understand though... I'm more visual than logic I guess... Could see it in my head... just couldn't put it into code as easily...

[mikel]

Hey @cr33ksid3,

 

Here you see the magic flying GreenHorse ...

 

See the Pen QWWeyRo by mikeK (@mikeK) on CodePen

 

Happy jumping

Mikel

[cr33ksid3]

Sweet Mikel! I understand how to animate the SVG elements of the whole when it is inline in the HTML. What I need to do is somehow create your same animation, or a version of it to use as a hover sprite in a list menu. The animation would pause with the horse over the fence while your focus or mouse is over the navigation element. Then when you move away from the nav element with your mouse... the horse continues over the fence and fades out.

[ZachSaucier]

2 hours ago, cr33ksid3 said:

One of my original questions from the beginning has been... Do I use the "horse-jump.svg" file with elements combined or save out the individual <g> elements for #fence and #jumper as their own separate files to make this work the way I mentioned above?

Both ways are just as valid in this case. I might keep them in the same file for convenience. 

 

24 minutes ago, cr33ksid3 said:

hover sprite

I think your understanding of sprite and mine is a bit different  

 

25 minutes ago, cr33ksid3 said:

What I need to do is somehow create your same animation, or a version of it to use as a hover sprite in a list menu.

Why not use the same approach that mikel posted, combining it with what you have?

[cr33ksid3]

5 minutes ago, ZachSaucier said:

Why not use the same approach that mikel posted, combining it with what you have?

I think that is what I will have to do. I can't work anymore on it today but with the long weekend ahead, hopefully I can figure it out. To do it the way Mikel suggests, I will have to hide the SVG file inline on the HTML side rather than call it from CSS. Then animate the parts accordingly for the hover state animation. Yes, I use sprite loosely I guess. I think of a sprite as a tiny animation more or less that attracts attention. But moreover I think sprite refers to one tiny bitmap image on a sprite sheet. I just like the word sprite.

 

Thanks for all the help guys... Have a fantastic holiday weekend (if you're American and get to celebrate)...