Reverse all sibling tweens on click on menu item

[kayhan80]

Hello

I'm trying to find how to reverse all sibling tweens when clicking on one of them and then play its tween.

 

Any Idea?

Thanks

            $j('.menu_link_parent').each(function(index, el) {
                var $this = $j(this);
                
                var subMenu = $this.find('div.submenu');
                var timeLine = new TimelineMax ({
                    paused: true,
                    reversed: true,
                    align: 'sequence',
                });
                var anim = 
                    timeLine.staggerFromTo( subMenu, 0.3, {
                        rotationX : 90,
                        autoAlpha : 0
                    }, {
                        rotationX : 0,
                        autoAlpha : 1,
                        onStart       : app.fn.common.makeVisible($j('.tw')),
                        onStartParams : $j('.tw'),
                    }, 0.3, '-=0.3' );
                $this.on('click', function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                   /* TODO : REVERSE ALL SIBLINGS FIRST */
                    anim.reversed() ? anim.play() : anim.reverse();
                });
            });

 

[mikel]

Hi kayhan80,

 

Welcome to GreenSock Forums.

 

I´m not sure if I understood your case correctly.

 

My interpretation is like this CodePen: 

 

See the Pen qrgVve by mikeK (@mikeK) on CodePen.

 

If that´s not a solution you expect it would be great if you provide a reduced CodePen showing your purpose.

 

Kind regards

Mikel

 

 

[kayhan80]

Thanks @mikel

 

Your solution is great, and for more information about my problem, here is my code on pen:

 

I just want to tween back all played timelines while click on any parent menu which has a sub menu and tween its submenu to show.

 

See the Pen OgqgVo by kayhan80 (@kayhan80) on CodePen.

 

[mikel]

Hi kayhan80,

 

just for fun...

 

The click version:

 

See the Pen NgJmdN by mikeK (@mikeK) on CodePen.

 

and - I would prefer - the mouseenter version:

 

See the Pen EXMJdd by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

 

 

[kayhan80]

Thank you so much...