Drop-down Animation Not Following Program

[scottiejhaines (Scott Haines)]

I’m having an issue with my drop-down animations. See ‘GIVE’ button on my site for active example. I have a drop-down menu in the form of a complex div. When the visitor hover’s over the nav button the drop-down div is supposed to come down while the divs inside that div are simultaneously lowering to create a staggered div effect. However, the animation plays back in two steps. First, the main div comes down, AND THEN the child divs move. These should be all happening at the same time and end together as instructed. Is there something I am doing wrong or is this a bug in the program?

Please note that my header group is set to 100VH while I work so I can see and edit my drop-down menus. It would be great if I didn’t have to do this in order to see what I’m working on. Is this also something that could be fixed? (This symbol group is supposed to be on top of all other content, so why does it get grayed out?)

-Scott

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[Brando (Brandon Roche)]

Hey @scottiejhaines

This is definitely weird behavior, but I don’t think it’s a bug. It looks like you have a pretty complex interaction and there it just needs some final tweaking to work as expected.

First, the header element appears as 0px height because all the elements nested within are set to position: absolute. This basically registers as 0px height so the parent element (header) will also have 0px height.

I think the main issue here is that you are using in out circ for your easing method. I recommend changing this to ease in out or something similar. It appears to have fixed the issue on this end.