Collapsing <hr/> to the center

[rustytusk]

Hi,

 

I want to collapse a <hr /> and then open it again, please see the codepen. 

First problem is that setting the width to 'auto' is not quite working. Next Problem is that the hr collapses towards the left and not to the center.

 

Any suggestions?

 

Thanks in advance!

See the Pen LNQpWP by anon (@anon) on CodePen

[ZachSaucier]

Hey rustytusk and welcome.

 

If you just need to change the visual state of the hr, you should use transforms instead. In your case, that means you should use scaleX instead of width. This will fix your centering issue as well

$('.hr1 button').click(function() {
  if(hrOpen) {
    // TweenMax.to($('.hr1 hr'), 0.5,  {
    //   width: 0
    // });
    TweenMax.to($('.hr1 hr'), 0.5,  {
      scaleX: 0
    });
  }
  else {
    // TweenMax.set($('.hr1 hr'), { 
    //   scaleX: 0
    // });
    // TweenMax.from($('.hr1 hr'), 0.5,  {
    //   width: 0
    // });
    TweenMax.to($('.hr1 hr'), 0.5,  {
      scaleX: 1
    });
  }
  hrOpen = !hrOpen;
})

Here's

See the Pen KzQVPb?editors=0010 by Zeaklous (@Zeaklous) on CodePen

 

I also left commented a way to transition the width from 0 to auto by using a set command. However, this approach will not transition from or to the center without some ugly work arounds

[rustytusk]

Thanks a lot Zach, works like a charm!