Hi everybody!
I have a problem configuring a menu animations. That's my 5th version. I realised the best way is to use master timeline.
But, trying to put it all together, I get an unpredictable behavior.
Animation for showing/hiding dimmer works great.
dimmer_tl
.fromTo(dimmer, {opacity: 0, display: 'block'}, {opacity: 1})
.set(js_dimmer, {display: 'block'})
.add('show')
.to(dimmer, {opacity: 0, display: 'none'})
.set(js_dimmer, {display: 'none'})
.add('hide')
dimmer_tl.tweenTo('show');
dimmer_tl.tweenTo('hide');
But truing to do the same with menu background doesn't work :(
bg_tl
.fromTo(bg, {opacity: 0, display: 'block'}, {height: 200, opacity: 1})
.add('show_list')
.fromTo(bg, {opacity: 0, display: 'block'}, {height: 100, opacity: 1})
.add('show_search')
.to(bg, {opacity: 0, display: 'none'})
.add('hide')
bg_tl.tweenTo('show_list');
bg_tl.tweenTo('hide');
It feels like the animation on show_list is not pausing and going threw all of them
bg_tl
.fromTo(bg, {opacity: 0, display: 'block'}, {height: 200, opacity: 1})
.add('show_list')
// .fromTo(bg, {opacity: 0, display: 'block'}, {height: 100, opacity: 1})
// .add('show_search')
// .to(bg, {opacity: 0, display: 'none'})
// .add('hide')
Or maybe I'm trying to reinvent the wheel and there are better practices to control?
I'm glad to hear any suggestions. Thanks!
P.S. Also moving mouse really fast between links play a timeline through all of them. I guess I need to add a delay somewhere but every time I do so it's just breaking apart.