Jump to content
GreenSock

garakatsamol

Mega menu with GSAP issue

Recommended Posts

Hi all,

i have the following issue:
I'm trying to build a full page mega menu. The main idea is that i create 4 columns and when a mouseenter event occurs to any column i change the width of the entered column to 51% and i shrink the other 3 columns to 17%.

 

I run through an array of the columns and if the column is active i attach a timeline. If it is not active i attach a second one resetting it to initial values. (i am not very sure that this is the best practice, but that's what i came up, any suggestions are welcome).

 

When the resizing happens i show the content of the selected column, or hide it in case it is not active. The issue appears when i move the mouse quickly so probably the resetting timeline is not over yet when the new timeline starts. I tried killing tweens before i apply a new one but this obviously doesn't solve anything.

 

I'm feeling a little stuck, can you advise please?

 

(sorry for the messy css, the problem is in the js anyway)

See the Pen ENqVpo by garakatsamol (@garakatsamol) on CodePen

Link to comment
Share on other sites

I didn't have time to go through all your actual code but the following technique should be a good starting point.

 

Instead of attaching new timelines to elements I check on mouseenter of any column to see if there is an active column. If I find an active column I hide all its contents and then create a new timeline that:
 
  1. shrinks the width of all columns I am not over
  2. grows the column I am over
  3. reveals the stuff in the column I am over.
var active;


$(".box").mouseenter(function(){
  
  //hide active elements
  if(active){ 
    TweenLite.to(active.find("h1"), 0.3, {opacity:0, x:0, overwrite:"all"});
    TweenLite.to(active.find("p"), 0.3, {x:0, opacity:0, overwrite:"all"});
  }
  
  //introduce new active elements
  var others = $(".box").not(this);
  active = $(this);
  var tl = new TimelineLite();
  tl.to(others, 0.3, {width:"16%"}, 0)
    .to(active, 0.3, {width:"52%"}, 0)
    .to(active.find("h1"), 0.3, {opacity:1, x:100}, 0.2)
    .to(active.find("p"), 0.3, {x:100, opacity:1}, 0.25);
})

http://codepen.io/GreenSock/pen/WoVxoe?editors=0010

 

I found I could move my mouse very quickly and it never got stuck.

 

 

  • Like 4
Link to comment
Share on other sites

@Carl Thank you very much, your approach is much more neet than mine!

@Blake very interesting post indeed. Thanks!

 

Thanks for the great work in GSAP and the great community here!

Cheers

  • Like 2
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.
×