Jump to content
GreenSock

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

Call a Greensock Timeline with JavaScript?

Recommended Posts

I'm working on a "mega menu" type dropdown menu and currently just using CSS transition, triggered by JS mouseenter event. I eventually want to make it drop down. Is it possible to create the drop-down animation via Greensock as a timeline, then calling that timeline on mouseenter? 

See the Pen rXBgNR by ericnguyen23 (@ericnguyen23) on CodePen

Share this post


Link to post
Share on other sites

Hey Eric.

 

This is definitely possible! The setup depends on how you want it to animate. They key concept is that instead of adding a class, you'd use a tween to affect some properties of the drop down menu. Then when the menu/navigation has stopped being hovered, you tween it back to being hidden.

 

Is there a specific part of this process that you're having trouble with?

Share this post


Link to post
Share on other sites
4 minutes ago, ZachSaucier said:

Hey Eric.

 

This is definitely possible! The setup depends on how you want it to animate. They key concept is that instead of adding a class, you'd use a tween to affect some properties of the drop down menu. Then when the menu/navigation has stopped being hovered, you tween it back to being hidden.

 

Is there a specific part of this process that you're having trouble with?

 

Not yet, for now at least. 

I just wanted to verify this is possible. I'll go play with it now and if I have questions I'll come back.

Share this post


Link to post
Share on other sites

I'm back! 

I've edited/updated my codepen since I'm developing a React menu: 

See the Pen rXBgNR by ericnguyen23 (@ericnguyen23) on CodePen

 

So far, I've got the timeline to run (onLoad). Now how do I call it on mouseover and mouseleave? I've setup the mouseenter and mouseleave event handlers, but not sure how I'd go about calling the timeline. 

 

 

Share this post


Link to post
Share on other sites

Unfortunately I know nothing about react so I haven't even tried to work out what you intend with the useEffect function but this is a basic implementation of using paused:true on timeline and play and reverse in event handlers. Hopefully it will get you moving in the right direction.

 

See the Pen QeLXVj?editors=1010 by Visual-Q (@Visual-Q) on CodePen

  • Like 5

Share this post


Link to post
Share on other sites
16 hours ago, Visual-Q said:

Unfortunately I know nothing about react so I haven't even tried to work out what you intend with the useEffect function but this is a basic implementation of using paused:true on timeline and play and reverse in event handlers. Hopefully it will get you moving in the right direction.

 

 

 

 

I'm a noob in React myself, actually a relative noob in modern web dev, but seems like I have to use `useEffect` for animations to work with a functional component. 

 

This is what I was looking for, thanks! 

 

This is totally a side topic and not related to GSAP, but I'll throw it out there: How can I get my subnav to be positioned behind my main nav? 

See the Pen rXBgNR by ericnguyen23 (@ericnguyen23) on CodePen

Share this post


Link to post
Share on other sites

Take away the z-index of .nav. 

 

If you give it a z-index it will create its own stacking context, which prevents children from being placed behind it. See this post for more info.

 

Happy tweening!

  • Like 1

Share this post


Link to post
Share on other sites
14 minutes ago, ZachSaucier said:

Take away the z-index of .nav. 

 

If you give it a z-index it will create its own stacking context, which prevents children from being placed behind it. See this post for more info.

 

Happy tweening!

 

Thanks Zach - although that works, it takes away the hovering functionality with subnav (because of the element below it). I'll look into more, hopefully I don't have to tear up my code too much! 

Share this post


Link to post
Share on other sites

You can just apply the hover effects to the sub nav itself in addition to the main nav.

  • Like 1

Share this post


Link to post
Share on other sites

I ended up taking all z-indexes out of play, even on subnav ( since a negative z-index limited me to a lot of functionality on that element) and positioned it absolute and animating visibility and height which achieved the effect I was looking for. 

 

GSAP is amazing!

 

See the Pen rXBgNR?editors=0110 by ericnguyen23 (@ericnguyen23) on CodePen

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×