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.