Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
xleooow

Jquery events start after timeline

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

I want to make a drop down menu.
 

You first have to click on 'discover' and after that you can hover over elements to let them appear/dissapear. 
I also want that you first have to hover over, for example, the 'Sail's' before you can hover over the block under it: 'Jib Sail' & 'Main Sail'.

 

My problem is that even before you click on 'discover', you already can hover over the Jib & Main sail.

Is there a way that I can put this in a timeline, so that you only can hover over it after the timeline is done?

 

Codepen: 

 

Thanks for your help!

See the Pen WGqddQ by xleooow (@xleooow) on CodePen

Link to comment
Share on other sites

Hello xleooow and Welcome to the GreenSock Forum!

 

One way is add a class to the elements being hovered parents .options and .extraoptions. And then only bind or target events with that class as your parent.

 

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

 

So after #discover is clicked you add a class on their parents .options and .extraoptions.

$(".options").add(".extraoptions").addClass("discover-clicked"); 
$('#discover').click(function(){    
    $(".options").add(".extraoptions").addClass("discover-clicked"); 
    TweenMax.to($(this), 1, {opacity:0});
    tl.restart();
});

And then instead of targeting $(" .sail") you target $(".discover-clicked .sail") so it will only apply if that cl;ass is on the parent.

 

Another better way is:

 

Create a timeline and then simply play() and reverse() the timeline when you hover in and out.

 

Example of adding a timeline to multiple elements using play and reverse() on hover in and out:

 

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

 

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

 

And simple hover in and out using play() and reverse() on one element

 

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

 

Happy Tweening! :)

  • Like 3
Link to comment
Share on other sites

Oh that already works great, thank you!

 

But now the problem is that if you go from 'Sail's' to, for example, 'Jib Sail', it disappears.
Any idea how to fix that?  :|

Link to comment
Share on other sites

For that you would have to have one event binded for .extraoptions and then add if statements inside your hover event to detect each step.

 

To do that i would have to change your HTML markup and your event handlers. But this is more of how to use jQuery and bind events type of question. In the forums we have to stay focused on questions regarding the GSAP API.

 

You should nest your .extraoptions div tag inside your .options div tag. And then position .sail, .boat. and .lines accordingly under each of your main 3 buttons #sail, #boat, and #lines.

 

But like i said you should rewrite your events and timeline so they are simply play() and reverse() when hovered in and out like my examples above.

 

If others would like to offer help they are more then welcome.

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