Jump to content
GreenSock

darkgr33n

Hover multiple elements - mouseenter changes width and moves other elements

Recommended Posts

Hi,

 

I think I'm really close to getting this to work, and while I can almost understand what's going wrong, I'm not quite sure how to address it or if its down to a wrong approach or not.

 

The goal is to be able to hover over each panel and to change width. 

I'm actually changing the width of an inner div as a pseudo-clip-path so that the content (image/video) doesn't scale.

 

 

SO, in the example, if hover over any panel without touching any of the other panels, all works well.

However, if you hover over an adjacent panel, initially it seems to work but when you hover off things break down.

 

Looking at the compiled code in dev tools, the translate to the adjacent panel seems to look ok, but when you hover off it's not completely reversing correctly.

 

I'm using prevAll and nextAll to work out which way to move the non-hovered panels.

 

I suspect something along the lines of the .to values get screwed up somewhere along the line.

 

I tried a .fromTo version, which might be slightly closer as it doesn't leave gaps, but because it's a .fromTo, hovering to an adjacent panel manifests a big jump which looks bad! (

See the Pen poEGyBw by darkgr33n (@darkgr33n) on CodePen

);

 

I've tried to work out a way to try and monitor the state of the panels, but as i said, I can't quite understand the whole picture to determine exactly what's wrong. It feels like I need to know if a panel is "open" before reversing or not not reversing the other panels that had moved as, in the .fromTo version, that would seem to be the only issue.

 

Any ideas? Am I even close?! I think I've come quite far, but not yet far enough 😕

 

Cheers!

 

 

See the Pen VwKgZOO by darkgr33n (@darkgr33n) on CodePen

Link to comment
Share on other sites

Hey darkgr33n. Step by step process through creating this effect is kind of out of scope for these forums. These forums are focused on GSAP-specific questions and while you use GSAP, most of your question is more logical. So if you have GSAP-specific questions please ask :) 

 

With that being said, I likely would try laying things out with flexbox instead, since the layout you're wanting is built into flexbox - taking a given width and dividing it up into parts. Then you just have to animate the flex properties. 

 

If you are going to use your method I likely wouldn't do any reversing - I would use new .to() tweens each time you need to change state. Also make sure to overwrite old tweens when appropriate (overwrite: 'auto').

 

Alternatively you could try using the Flip plugin to transition between states. 

  • Like 1
Link to comment
Share on other sites

Hey Zach,

 

Thanks for taking the time to look ;)

 

I was beginning to suspect it was more logical than a specific GSAP issue, but I wasn't sure if I was missing something GSAP-related that would solve it. I've been racking my brains all day.

 

I've started looking at event.relatedTarget to  work out where the mouse is coming from or going to and then trying to animate accordingly.

I had started to avoid reverse as well during my experiments, but perhaps you're right - maybe i should just rebuild/simplify the layout a little.

 

I actually based the layout on this site - which also uses GSAP to do the business - but while I can see what's happening with devtools I'm not entirely sure how it's achieved. 

 

I was half-aware of Flip but haven't looked at the docs yet.  I'll have a look ;)

 

Cheers! 

Link to comment
Share on other sites

Hey @darkgr33n 

 

Have you ever seen @Carl's auto open/close demo?

See the Pen YzGpXWO by snorkltv (@snorkltv) on CodePen

 

That's using clicks, but you could adapt it to hovers.

 

He even has a free lesson about it on his Creative Coding Club site. (scroll way down)

https://www.creativecodingclub.com/bundles/creative-coding-club

 

I hope it helps. Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

@PointC

 

Hey Craig - thanks for that!

 

No, I hadn't seen it, but will definitely have a look in the morning. I'm lost in mouse events at the moment and it seems close, but I really like the way the example you showed feels and could well be the way to go ;)

 

Many thanks!

Link to comment
Share on other sites

Just had a quick look and it could certainly be an option for me:

 

However, with the site I linked to above, when you hover over multiple adjacent panels, the overall width of the block (of 10 panels) doesn't change.

 

So if you kind-of hover and sweep across a few panels in the amended example ((

See the Pen wvzNQqg by darkgr33n (@darkgr33n) on CodePen

), it can look a little jerky as the parent container expands and contracts. 

 

I do actually like the organic feel it gives, but my client has been quite specific - perhaps I need to challenge her to think again...

Link to comment
Share on other sites

11 minutes ago, darkgr33n said:

my client has been quite specific - perhaps I need to challenge her to think again...

Perhaps. But it's quite doable keeping the same total width as well.

Link to comment
Share on other sites

@ZachSaucier

 

Quote

Perhaps. But it's quite doable keeping the same total width as well.

ooh, intriguing!!

 

that does seem to be the crux of the issue. my very first attempt before I asked the question here was much simpler and was working except that the visual width of the container appeared to change as you hovered over multiple panels. 

 

See the Pen gOwQQrm by darkgr33n (@darkgr33n) on CodePen

 

Link to comment
Share on other sites

Thanks @PointC,

the demo and video almost did the trick :) really clear video actually; once this project is over I should sign up and go through some of the tutorials.

 

Anyway, I've got it working without any errors and without messing around with mouse events. I went down the wrong road there I think!

 

See the Pen xxEBqNE by darkgr33n (@darkgr33n) on CodePen

 

The only thing, as mentioned above, is that when one expander is open and you move to an adjacent expander, the width of the overall block increases because the closing of the previous and opening of the current panels aren't synced.

 

@ZachSaucier when you said that keeping the same total width was quite doable, were you referring to the demo that carl did and that this new pen is based on ? And, if so, was it the syncing of the reverse and play that are called when you move from an adjacent block what you were thinking ?

 

Thanks both ;)

 

 

 

 

Link to comment
Share on other sites

1 hour ago, darkgr33n said:

were you referring to the demo that carl did and that this new pen is based on ?

No, I was not. I would use flexbox to do the layout and sizing if you want the total width to be the same :) Using the method that you're currently using you would have to accommodate easing and durations which is not trivial to do in most cases.

Link to comment
Share on other sites

Ah, gotcha!

 

A quick experiment, but yeah I think that could be the way to go.

With five items I was still getting a little movement on either end, but with 10, if it is there, its barely noticeable.

If I can get the images and videos to work without affecting anything, we're golden. 💥

 

See the Pen zYKbdLx by darkgr33n (@darkgr33n) on CodePen

 

Thanks for the clarification ;)

 

Cheers!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×