CODEWITHSUNDEEP
javascriptjquerycssjquery-animate
JanuaryJ
JanuaryJ

Reputation: 57

Jquery animate width easing is abrupt

I am trying to create a auto text changing effect using basic jquery. It's working OK, but it's chopy right at the last part. I think it has something to do with the element being fixed position. Not really sure what to do next. Any help greatly appreciate. Thank you.

var adj=['Artists', 'Exhibitions', 'Community', 'Collaboration', 'Productions', 'Collectives', 'Movements', 'Engagement'];
var adj_text = document.getElementsByClassName('changing-text')[0];
var index = 1;
var adj_n = adj.length;
setInterval(function() {
	$(adj_text).animate({width: '0'}, 500, function(){
		 $(adj_text)
		 // .hide()
          .text(adj[index])
          // .show()
          .animate({width: "150"+"px"}, 1000); 
	})
          
    index = (index + 1) % adj_n;
}, 2000);
div#iv-container {
    height: 100vh;
}
.loader-text{
	left: 20%;
    top: 50%;
    transform: translate(-20%, -50%);
    position: absolute;
    z-index: 100;
    
}
.loader{
   position: relative; 
   opacity: 0;
	cursor: default;
	pointer-events: none;
	left: 0;
  transition: width 0.5s ease-in-out;
}

.loader h1 {
    font-size: 3rem;
    font-family: Dosis;
    font-weight: 400;
}

.loader h1 span.logo-icon{
	font-family: "31brklyn";
	font-weight: normal;
}
.changing-text {
    color: rgb(204, 0, 1);
    position: fixed;
    width: 200px;
}
.loader{
	opacity: 1;
	animation: animInitialHeader 2s cubic-bezier(0.7,0,0.3,1) both;
}

@keyframes animInitialHeader {
	from { 
		opacity: 0; 
		transform: translate3d(-800px, 0, 0); 
	}
}

@font-face {
  font-family: "31brklyn";
  src:url("http://31stbrklyn.com/css/fonts/31brklyn.eot");
  src:url("http://31stbrklyn.com/css/fonts/31brklyn.eot?#iefix") format("embedded-opentype"),
    url("http://31stbrklyn.com/css/fonts/31brklyn.woff") format("woff"),
    url("http://31stbrklyn.com/css/fonts/31brklyn.ttf") format("truetype"),
    url("http://31stbrklyn.com/css/fonts/31brklyn.svg#31brklyn") format("svg");
  font-weight: normal;
  font-style: normal;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div id="iv-container" class="iv-container">
    <div class="loader-text">
      <div class="loader"><h1>31ST <span class="logo-icon">z</span><span class="changing-text">Artist</span></h1></div>
    </div>  
  </div>

Upvotes: 2

Views: 338

Answers (1)

Sabith
Sabith

Reputation: 1656

Increase the span width to 250px in the setInterval as :

setInterval(function() {
$(adj_text).animate({width: '0'}, 1000, function(){
     $(adj_text)
     // .hide()
      .text(adj[index])
      // .show()
      .animate({width: "250"+"px"}, 500); 
  })

    index = (index + 1) % adj_n;
}, 2000);

Hope it will solve your issue.

Upvotes: 3

Related Questions