Split Text wiered issue - character spreads to full width

[surya_mayekar@rediffmail.com]

Hello,

 

I am facing wiered issue while animating text inside h1, first time it animate correctly, but if i reload page, the text spreads to full width of screen.

My html is as follows:

<h1>

                <span class="main-txt mr">C<span class="split">hirag</span></span>

                <span class="main-txt">S<span class="split">abhnani</span></span>

  </h1>

 

CSS:

.main-txt{

  color: $yellow;

  font-family: 'Gorgeous-Thin';

  font-size: 17rem;

  font-size: 22.5rem;

  line-height: 10rem;

  text-transform: uppercase;

  margin-bottom: 20px;

  position: relative;

  @media (max-width:768px) {

    text-align: center;

  }

 

  &:nth-child(1){

    margin-right: -17px;

    margin-right: -27px;

  }

  &:nth-child(2){

    margin-left: -17px;

  }

 

  > span{

    line-height: 0;

  }

 

}

.mr{

  display: inline-block;

  @media (max-width:768px) {

    margin-right: 0;

  }

}

 

JS

var currentDynamicPart = $('h1 .split');

var loader_logo1 = new TimelineMax()

.to('.slide1 h1', 0.3,{top: 0})

.to('.slide1 h1 .main-txt', 0.3,{fontSize:'17rem'})

.staggerTo(mySplitText.chars,  0.3, {autoAlpha:0,  width: 0, x: '-100%', ease:Power1.easeInOut}, allDone)

.staggerFrom(mySplitText.chars, 0.3, {autoAlpha:0,  width: 0, x: '100%', ease:Power1.easeInOut}, allDone)

.to('.slide1 h1 .mr', 0.3,{margin: '0 30px 0 0'})

 

Please help on this, i am struggling to fix it since last 2-3 days, looked up in community, but no solution found.

 

[OSUblake]

Hi surya!

 

Please a make minimal demo. 

 

Also, I noticed that you are using a deprecated syntax. Please check out the migration guide.

 

 

[GreenSock]

Yeah, without a minimal demo we can't help much. Here's a quick CodePen with some of your code (corrected to modern format): 

See the Pen 726386678178ee50b72f060aa09a30d1?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Seems to work fine.