Trying to Animate to open div from middle & the animation to be vice versa

[Syed Azam]

Hi, I am trying to animate the 6 divs starting Image should be always displayed and the animation i am trying to start from bg-2 to bg-6, currently it is from bg-6 to bg-1.. can you please help here. ?

 

Thanks 

See the Pen WNzmWwJ by syedazam (@syedazam) on CodePen

[mvaneijgen]

I would not nest your elements, because if you do the parent shape needs to be visible to show the child shapes. 

 

So what I've done is moved your `.bg`'s to to the top level and add `position: absolute;` to them to have them all stack on top of each other. You could target each `.bg` individually, but this is the perfect use case for Stagger (see the docs for an overview). I also find it easier to animate .from(), because if your elements are already positioned at their end state, you can just to a .from() tween to get them to animate without any other code. At last I animate `scaleX` instead of `width` this is more perforated and easier to have them animate form the center, oh and I added a `defaults:{}` property to your timeline with a `transformOrigin: "center center"` to have all the elements animate from their center position.

 

See the Pen qBovGQY?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

 

Good luck!

[Syed Azam]

Thank you @mvaneijgen, just tweaked  a little - 

See the Pen oNqVrEr?editors=0010 by syedazam (@syedazam) on CodePen