Jump to content
Search Community

Hovering on menu item offsets elements Y position

Wizard of Oz test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hi, when I hover over the menu items QUICKLY, before the Y is done, I get layout errors. I tried running my hover effect onComplete of the menuIn animation, but that only fixes the issue on the first run. Any tips or pointers on how I can get this working smoother? :)

 

Here's a screen grab showing the error: https://www.awesomescreenshot.com/video/8694519?key=cc9923974a749689384ebe39ef9af2ec

See the Pen WNMNmeP by martinkariuki7-the-looper (@martinkariuki7-the-looper) on CodePen

Link to comment
Share on other sites

  • Solution

Heya!

 

Ok so there's a couple of things I can recommend here.

 

First up - overwrite modes. You're using true which is killing the conflicting tweens. You don't want that. You only want to overwrite the conflicting parts

  • true: Any existing tweens that are animating the same target (regardless of which properties are being animated) will be killed immediately.
  • "auto": Only the conflicting parts of an existing tween will be killed. 

Next, no need for an open and close timeline.

We can create one timeline and then manage it with control methods. like tl.play(0) and tl.reverse()- then the timeline is interruptible, if you click open and close really quickly it'll just change the direction the timeline is animating.

Here's an adjusted demo.

 

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

  • Like 2
  • Thanks 1
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.
×
×
  • Create New...