[Tigger Timeline animations for multiple divs on hover]

Basically, Im trying to get an animation (#dd-heading) to trigger when the user hovers over  nav button(.dropdownmenu-button) that triggers dropdown with animation in it....

 

but it only seems to trigger the first div and the rest dont trigger.

 

Similar to this - https://www.open-wear.com/

 

//gsap animation of elements in dropdown navigation

 

  var toggle=0;
  var tldropdown = new TimelineMax({paused:true});
  var items = $('#dd-heading');
  var list = $('.dropdownmenu-button');

 

    tldropdown.staggerTo(items,  1.5, {x:20,opacity:1,delay:.5}, .5)
      .addPause(null,function(){ if(toggle)tldropdown.play(); } )
      .staggerTo(items, 1.5, {x:20,opacity:1}, .5)

 

  function over(){  tldropdown.restart(); toggle=0; }
  function out(){  tldropdown.play(); toggle=1; }

 

  list.hover(over, out);