Multiple sliding panels

[wojtek]

Hey! 

 

I like to use the "timelinemax" to create animations for multiple sliding panels but i am having some problems and maybe you can guide me a little.

 

I created a simple on click animation that is working 

        var panelTrigger =  $j('#account-trigger'),

        timeline = new TimelineMax({paused: true, reversed: true});

        timeline.fromTo("#account-panel", 0.3,
            {x:"100%", ease: Circ.easeInOut},
            {x:"0%", ease: Circ.easeInOut});

        panelTrigger.on('click', function(){
            timeline.reversed() ? timeline.play() : timeline.reverse();
        });

But now i have 2 problems:

1. I like to hide/reverse the animation on body click

2. I have several animated items (other panels and things like this) and i want to have only 1 element visible at a time - so when i have the #panel1 opened and click to trigger #panel2 the #panel1 should be hided. Something like separated accordions toggled trough different buttons .

 

Thank you in advance for all the tips.

Wojtek

 

 

[PointC]

Hi wojtek 

 

Welcome to the GreenSock forum.

 

What you're describing shouldn't be too difficult. It's unclear to me how your panels are positioned and how they should be hidden. Do they occupy the same space? Should an open panel animate to its closed position before the new one or should it just disappear?

 

If you search the forum for 'panels' or 'accordion', you'll find many topics and demos.

 

It's difficult to give you the best advice without seeing a demo. If you could make one for us showing how you'd like things to work, I'm sure everyone can give you some advice and tips. 

 

Please see this topic about creating one:

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Thanks and happy tweening.