Tweenlite ignoring timeline placement

[d1ch0t0my]

Hi guys,

 

I have a weird issue that has popped up. I'm obviously missing something glaringly obvious but its stumped me.

 

I have created a simple accordion menu and created 2 tweens on a timeline:

 

    tl = new TimelineLite();
    tl.to(currOpenSub, 1, {maxHeight:0});    
    tl.to(subMenu, 1, {maxHeight:600}, 0);

..but despite me marking the second tween to start at 0 it waits until the first tween is complete before firing. I've never come across this before with Tweenlite/Tweenmax so what am I missing here?

 

Thanks for any advice and help guys .

See the Pen LRkKwE by anon (@anon) on CodePen

[Carl]

Thanks for the demo. 

 

If you open dev tools you will see that both animations are starting at exactly the same time.

See this video: http://greensock.com/forums-support-files/issue3.mp4

 

I think the problem is you are tweening maxHeight to and from a somewhat arbitrary value of 600.

If your menu is only 200px tall and you tween from maxHeight 600 to 0, there are 400px worth of tweening that you will never see.

[d1ch0t0my]

Hi Carl, really sorry for the late reply. I took onboard what you said, went off and sort of lost myself down the rabbit hole of this site I'm building. Apologies.

 

Totally understand what you advised and kick myself for not realising it heh. I've worked around it using a trick that Jonathan (I think) posted which is:

 

   tl.set(subMenu, {height:"auto"});
   tl.from(subMenu, 0.3, {height:0}, 0);

Works great and no issues. Thanks for your time in making the video to clarify the issue .