If anyone can phrase this question better than I can, please advise and I will alter (or edit yourself).
Here's my current jsfiddle: https://jsfiddle.net/5v7mzadu/
My HTML:
<div class="text-cycler">
WE <div class="c-text" id="ctext-1">CARE</div>
<div class="c-text" id="ctext-2">THINK</div>
<div class="c-text" id="ctext-3">SEE</div>
<div class="c-text" id="ctext-1">KNOW</div>
</div>
My CSS:
.text-cycler {
text-align:center;
font-size:25px;
}
.c-text {
display:inline-block
}
My Javascript:
var divs = $('div[id^="ctext-"]').hide(),
i = 0;
(function cycle() {
divs.eq(i).fadeIn(400)
.delay(1000)
.fadeOut(400, cycle);
i = ++i % divs.length;
})();
As you can see the second word fades in/out,. I'd like to add a smooth transition to the div, so that the width of the div container does NOT abruptly change width size. (so that the width "snap" is more smooth)
Can anyone help?
I believe you needed the animation over the content and text alignment center. And indeed this must solve your purpose.
I have added span{white-space: nowrap; vertical-align: text-top;} to force it to align in single line, and added jQuery animate method to animate the width of the rotating text
And here's the fiddle for you to play around
var divs = $('div[id^="ctext-"]').hide(),
i = 0;
(function cycle() {
divs.eq(i)
.animate(400, function(){
$('.x').animate({width: $(this).innerWidth()});
})
.fadeIn(400)
.delay(1000)
.fadeOut(400, cycle);
i = ++i % divs.length;
})();.text-cycler {
text-align:center;
font-size:25px;
}
span{white-space: nowrap; vertical-align: text-top;}
.c-text {
display:inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-cycler">
<span> WE </span><span class="x"><div class="c-text" id="ctext-1">CARE</div><div class="c-text" id="ctext-2">THINK</div><div class="c-text" id="ctext-3">SEE</div><div class="c-text" id="ctext-1">KNOW</div></span>See this snippet
var divs = $('div[id^="ctext-"]').hide(),
i = 0;
(function cycle() {
divs.eq(i).fadeIn(400)
.delay(1000)
.fadeOut(400, cycle);
i = ++i % divs.length;
})();.text-cycler {
font-size:25px;
position:fixed; /*added*/
padding-left:40% /*added*/
}
.c-text {
display:inline-block
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-cycler" align="center">
WE <div class="c-text" id="ctext-1">CARE</div><div class="c-text" id="ctext-2">THINK</div><div class="c-text" id="ctext-3">SEE</div><div class="c-text" id="ctext-1">KNOW</div>
</div>JavascriptLess way.
If you want to get funky. (No seriously, this is more a funky solution than usable)
.text-cycler {
width:75%;
margin:auto;
user-select: none;
text-align:center;
font-size:5vw;
}
.text-cycler:after {
content:"";
display:inline-block;
animation: change;
animation-duration: 10s;
animation-iteration-count: infinite;
}
@keyframes change {
0% {
content: "CARE";
opacity: 0;
}
3% {
opacity: 1;
}
22% {
opacity: 1;
}
25% {
content: "CARE";
opacity: 0;
}
25.1% {
content: "THINK";
}
28% {
opacity: 1;
}
47% {
opacity: 1;
}
50% {
content: "THINK";
opacity: 0;
}
50.1% {
content: "SEE";
}
53% {
opacity: 1;
}
72% {
opacity: 1;
}
75% {
content: "SEE";
opacity: 0;
}
75.1% {
content: "KNOW";
}
78% {
opacity: 1;
}
97% {
opacity: 1;
}
100% {
content: "KNOW";
opacity: 0;
}
}<div class="text-cycler">
WE
</div>