[Height is not being seated well in TimeLine]

Oh its true, thanks both of you! In the end I didn't use the animation anyways haha.

[Height is not being seated well in TimeLine]

I'm doing an animation to show an order summary, I want first expand the width and then the height to create a fancy effect but seems that height is being seated wrong because in the end of the animation it has an extra height not desired. Help! 

 

Both tweens works well individually but the problem is when I put them together.

 

Expected:

 

Current:

See the Pen MWYJMJK by GabuDev (@GabuDev) on CodePen

[Flicker effect on Edge browser.]

Awesome! I have tested and this really worked,

thanks Mr. @ZachSaucier.

[Flicker effect on Edge browser.]

@GreenSock Thanks for your fast answer!

 

Scale was my first option for the animation, but safari show an issue where the Icon Dollars not appear.

 

I just have included an codepen example to original post above.

Thanks!

[Flicker effect on Edge browser.]

I am dealing with a bug that seems be present only on Microsoft Edge < 15.

Someone here know how resolve it or what is causing this?

 

Chrome, Safari, Firefox, IE 11.

 

Edge < 15

Here is the code for the animations.

function scaleAndShrinkAnimation($element, maxWidthPercentage, durationSeconds) {
  var widthHalf = maxWidthPercentage / 2;
  return TweenMax.to($element, durationSeconds, {
    width: maxWidthPercentage + '%',
    top: '-=' + widthHalf + '%',
    left: '-=' + widthHalf + '%',
    repeat: 1,
    yoyo: true
  });
}

  

See the Pen d91be8899582064151804a5108557ca5 by bv-design (@bv-design) on CodePen