Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rustytusk

Collapsing <hr/> to the center

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

Thanks a lot Zach, works like a charm!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×