user1801524 user1801524 - 5 months ago 13
CSS Question

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>




Answer

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.

Comments