Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Black Ducas

Underline animation with mouseenter and mouseleave

Recommended Posts

Hi

I'm trying to achieve the underline animation on links you can see on this site https://details.ch/en (click hamburger menu icon on top right to see it). Also you can check out my attached gif where I show you the various animation cases (on mouseenter and mouseleave) I need to develop.

I need to achieve the exact same interactions and animations you see.

It's like I'm not able to handle the relationships between the mouseenter animation and the mouseleave animation.

Someone could help me? Thanks

 

capture2.gif

Link to post
Share on other sites

Hi Black Ducas and welcome to the forums.

 

You have multiple tweens trying to affect the same element(s) so they're in conflict causing this jump. For something like this I'd probably recommend using a timeline for each element. Then in the hover enter you play part of it from the start and on mouse leave you play the rest of it. 

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

  • Like 1
Link to post
Share on other sites

Hi @ZachSaucier

looks awesome, thanks! ?

 

This technique is very interesting. When is recommended to use a timeline instead of separate tweens? Where in the docs I can read more about it and use cases?

Link to post
Share on other sites
21 hours ago, Black Ducas said:

When is recommended to use a timeline instead of separate tweens?

There are different cases where a timeline is preferred over a tween. In general, timelines are good when you need a sequence of events (such as this animation where you want one animation to complete - the entrance animation - to complete before another - the exit animation).

 

You can read more about timelines in the docs here: https://greensock.com/docs/v3/GSAP/Timeline

Link to post
Share on other sites
On 12/21/2019 at 11:26 AM, Black Ducas said:

When is recommended to use a timeline instead of separate tweens?

 

You may also gather some knowledge from the talking points discussed in this older article about using Timelines within GSAP 2. The general premise and benefits remain the same for version 3. Here is the blog post and referenced article.

  • Like 2
Link to post
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.

×