GSAP: Accordion children animation

Question

I've been trying to create something along the lines of accordion component in React, (the code pen is in vanilla but demonstrates the problem).

Pen: https://codepen.io/tim-bitanov/pen/MXrVRE

Original issue:

Basically, the accordion changes its width when expanded and items begin to enter from below. My problem is that the items do not really come from below, but rather from bottom right since the left property of the container changing due to new width.

<TransitionGroup component={null}>
    {this.props.expanded && (
    React.Children.map(this.props.children, (child) => (
        <Transition 
            timeout={500}
            onEnter={this.onSubMenuEnter}
            onExit={this.onSubMenuExit}
        >
            {child}
        </Transition>
     )))}
</TransitionGroup>

private onSubMenuEnter = (node: HTMLElement) => {
    TweenLite.set(node, { clearProps: 'all' });
    TweenLite.from(node, .5, { y: '+=50', opacity: 0 });
}

Can anyone suggest any way to tackle this?

I've tried using the TweenMax.ticker to get current parent left property but was unsure what to do with it

Answer 1

If you're still looking for a solution or someone else I forked your pen to make the items come from below.

You basically just need to translate them from half the width you're expanding the parent as long as you're using the same animation duration and easing.

see below for a container expanding from 0 to 130 as in your demo

  TweenMax.from(items, 1, {y: '+=50'}); //not ok
  TweenMax.from(items, 1, {y: '+=50', x:'-=65'}); //ok

The forked pen demo