Jump to content
Search Community

Collapsing <hr/> to the center

rustytusk test
Moderator Tag

Go to solution Solved by ZachSaucier,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



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

  • Solution

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;


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

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.
  • Create New...