Rotate text with javascript

Question

I would like to cycle through an array of words, creating the effect of rotating the text. I have most of the work, as you would expect. Is there a way to use the css transition along the length of the p element?

When moving from an object with char.length> 10 to an object with char.length <5 (for example), the movement is not smooth, and I would like to facilitate the movement of text around the word, rather than suddenly jumping backward (or forward depending on the length of the word) .

HTML:

<p><span id="description-rotate"></span> something built on something else.</p> 

SASS:

 @-webkit-keyframes rotate-text 0% opacity: 0 30% opacity: 1 50% opacity: 1 70% opacity: 1 100% opacity: 0 p font-family: 'Helvetica', sans-serif .rotate-text -webkit-animation: rotate-text 3050ms cubic-bezier(0.645, 0.045, 0.355, 1.000) infinite -moz-animation: rotate-text 3050ms cubic-bezier(0.645, 0.045, 0.355, 1.000) infinite -o-animation: rotate-text 3050ms cubic-bezier(0.645, 0.045, 0.355, 1.000) infinite animation: rotate-text 3050ms cubic-bezier(0.645, 0.045, 0.355, 1.000) infinite 

JavaScript:

 var descriptionArray = ['some text', 'some more text', 'some even longer text']; var descriptionLength = descriptionArray.length; var description = $('#description-rotate'); function loop(i) { description.text(descriptionArray[i%descriptionLength]); setTimeout(function() { loop(i+1); description.addClass('rotate-text'); }, 3050); // This duration must match the length of the animation } loop(0); 

I understand that this may be a bad way to explain my purpose, check out CodePen for a better idea of ​​what I'm trying to create.

Thanks!

See: http://codepen.io/anon/pen/JueGx

Answer 1

A simple jQuery example
by saving the necessary looping / replacing words in the data-* attribute:

 $("[data-words]").attr("data-words", function(i, words) { var $self = $(this).text(""), words = words.split("|"), tot = words.length, c = 0; for(var i=0; i<tot; i++) $self.append($('<span/>',{text:words[i]})); var $words = $self.find("span"); (function loop(){ $self.animate({ width: $words.eq( c ).width() }); $words.stop().fadeOut().eq(c).fadeIn().delay(1000).show(0, loop); c = ++c % tot; }()); }); 

 /* DATA-WORDS Loop/swap words in sentence */ [data-words] { vertical-align: top; position: static; } [data-words] > span { display: none; position: absolute; color: #0bf; } 

 <p> This is <span data-words="some|an interesting|some longer">some</span> text </p> <p> Say <span data-words="hi|wow">hi</span> to <span data-words="Javascript|Qaru">mom</span> </p> <script src="//code.jquery.com/jquery-3.1.0.js"></script> 

• Words | -delimited will be converted to an array and finally to child <span> elements
• Such span elements must be absolutely located inside the parent span element.
• Then jQuery will start a recursive loop, calculate the width of the next word and animate it (fade + width).

Answer 2

What about jQuery animate() function? http://api.jquery.com/animate/

You can trigger animations for each word in the array. Here is the idea, you will need to figure out how to populate the hasMoreWordsInTheArray and nextWordInTheArray :

 function animateParagraphTag(word) { if(hasMoreWordsInTheArray) { //some special code to calculate the best width based on the word length (theNewWidthValue) $('p').animate( { width: theNewWidthValue }, "fast", animateParagraphTag(nextWordInTheArray) ); } } 

You will need to calculate the width based on the length of the words and place it in the animation parameters, then as soon as the p tag finishes expanding / contracting accordingly, it calls the callback function, then you can go to the next element (word) of the array.