[Split Text wiered issue - character spreads to full width]

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.