Custom Animation: Rotating Text/Words on 7.1 FE

Site URL: https://www.thecreativeinka.com/about

Hi all - I've been trying to get this Rotating Words script to work on my About page for far too long. While it works just fine in the codepen.io website, it does not seem to want to animate when live on my Squarespace 7.1 FE page on my website. When the section is scrolled to/loaded, it seems to just jump once, but never rotates to the other words. What i've done/tried:

• Code block (this is where I placed the HTML code)
• Custom CSS (where I placed the CSS coding, coded under the block ID#)
• Javascript code: I've tried placing this in the page's code injection header within <style> tags, and have also tried to place it in Advanced > Code Injection, in the header - but neither option seems to want to make this animate as it should.

I think my issue is where/how to place the javascript code as I do think I've placed the HTML and custom CSS in the correct places.

This is the animation I am trying to insert: https://codepen.io/kenwestphal/pen/xqRZYZ

Any help is appreciated. 

@tuanphan 

I have a related issue regarding this code that I'm hoping you can help with. I got the rotation to work ("Contribute" being one of the words that rotates in the attached screenshot), but the view on smaller screens looks awful. This is what I have pasted in the code block:

<section class="sp-intro">
    <h2 class="sp-headline slide">
        <span>A Newsletter for Women Who Want to</span>
        <span class="sp-words-wrapper">
            <b class="is-visible">Contribute</b>
            <b>Create</b>
            <b>Connect</b>
        </span>
      <span>rather than consume</span>
    </h2>
</section>

Is there a way to have the text wrap so it doesn't have a line break?

Password to the site: inthehayl0ft

URL: https://impala-megalodon-5wds.squarespace.com/

Link to code:

https://codepen.io/kenwestphal/pen/xqRZYZ

On 10/28/2022 at 5:04 AM, HaleyWard said:

@tuanphan 

I have a related issue regarding this code that I'm hoping you can help with. I got the rotation to work ("Contribute" being one of the words that rotates in the attached screenshot), but the view on smaller screens looks awful. This is what I have pasted in the code block:

<section class="sp-intro">
    <h2 class="sp-headline slide">
        <span>A Newsletter for Women Who Want to</span>
        <span class="sp-words-wrapper">
            <b class="is-visible">Contribute</b>
            <b>Create</b>
            <b>Connect</b>
        </span>
      <span>rather than consume</span>
    </h2>
</section>

Is there a way to have the text wrap so it doesn't have a line break?

Password to the site: inthehayl0ft

URL: https://impala-megalodon-5wds.squarespace.com/

Link to code:

https://codepen.io/kenwestphal/pen/xqRZYZ

Which screen sizes? I tested some & it looks fine

I actually answered my own question. I moved the first </span> after "...Want to" down to the line before </h1> and it fixed the wrapping issue!

<section class="sp-intro">
    <h1 class="sp-headline slide">
        <span>A Newsletter for Women Who Want to
        <span class="sp-words-wrapper">
            <b class="is-visible">Contribute</b>
            <b>Create</b>
            <b>Connect</b>
          </span>
      <span>rather than consume</span>
     </span>
    </h1>
</section>

On 10/15/2022 at 1:30 AM, tuanphan said:

Hi,

JavaScript code, you need to wrap in <script> </script> NOT <style>

Also, the Codepen has this library, you need to add before script code

Thus, the script code should be

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  
jQuery(document).ready(function($){

var animationDelay = 2500,
barAnimationDelay = 3800,
barWaiting = barAnimationDelay - 3000, 
lettersDelay = 50,
typeLettersDelay = 150,
selectionDuration = 500,
typeAnimationDelay = selectionDuration + 800,
revealDuration = 600,
revealAnimationDelay = 1500;

initHeadline();


function initHeadline() {

singleLetters($('.sp-headline.letters').find('b'));
animateHeadline($('.sp-headline'));
}

function singleLetters($words) {
$words.each(function(){
var word = $(this),
letters = word.text().split(''),
selected = word.hasClass('is-visible');
for (i in letters) {
if(word.parents('.rotate-2').length > 0) letters[i] = '<em>' + letters[i] + '</em>';
letters[i] = (selected) ? '<i class="in">' + letters[i] + '</i>': '<i>' + letters[i] + '</i>';
}
var newLetters = letters.join('');
word.html(newLetters).css('opacity', 1);
});
}

function animateHeadline($headlines) {
var duration = animationDelay;
$headlines.each(function(){
var headline = $(this);

if(headline.hasClass('loading-bar')) {
duration = barAnimationDelay;
setTimeout(function(){ headline.find('.sp-words-wrapper').addClass('is-loading') }, barWaiting);
} else if (headline.hasClass('clip')){
var spanWrapper = headline.find('.sp-words-wrapper'),
newWidth = spanWrapper.width() + 10
spanWrapper.css('width', newWidth);
} else if (!headline.hasClass('type') ) {

var words = headline.find('.sp-words-wrapper b'),
width = 0;
words.each(function(){
var wordWidth = $(this).width();
if (wordWidth > width) width = wordWidth;
});
headline.find('.sp-words-wrapper').css('width', width);
};

setTimeout(function(){ hideWord( headline.find('.is-visible').eq(0) ) }, duration);
});
}

function hideWord($word) {
var nextWord = takeNext($word);

if($word.parents('.sp-headline').hasClass('type')) {
var parentSpan = $word.parent('.sp-words-wrapper');
parentSpan.addClass('selected').removeClass('waiting');
setTimeout(function(){ 
parentSpan.removeClass('selected'); 
$word.removeClass('is-visible').addClass('is-hidden').children('i').removeClass('in').addClass('out');
}, selectionDuration);
setTimeout(function(){ showWord(nextWord, typeLettersDelay) }, typeAnimationDelay);

} else if($word.parents('.sp-headline').hasClass('letters')) {
var bool = ($word.children('i').length >= nextWord.children('i').length) ? true : false;
hideLetter($word.find('i').eq(0), $word, bool, lettersDelay);
showLetter(nextWord.find('i').eq(0), nextWord, bool, lettersDelay);

}else if($word.parents('.sp-headline').hasClass('clip')) {
$word.parents('.sp-words-wrapper').animate({ width : '2px' }, revealDuration, function(){
switchWord($word, nextWord);
showWord(nextWord);
});

} else if ($word.parents('.sp-headline').hasClass('loading-bar')){
$word.parents('.sp-words-wrapper').removeClass('is-loading');
switchWord($word, nextWord);
setTimeout(function(){ hideWord(nextWord) }, barAnimationDelay);
setTimeout(function(){ $word.parents('.sp-words-wrapper').addClass('is-loading') }, barWaiting);

} else {
switchWord($word, nextWord);
setTimeout(function(){ hideWord(nextWord) }, animationDelay);
}
}

function hideLetter($letter, $word, $bool, $duration) {
$letter.removeClass('in').addClass('out');

if(!$letter.is(':last-child')) {
 setTimeout(function(){ hideLetter($letter.next(), $word, $bool, $duration); }, $duration);
} else if($bool) { 
 setTimeout(function(){ hideWord(takeNext($word)) }, animationDelay);
}

if($letter.is(':last-child') && $('html').hasClass('no-csstransitions')) {
var nextWord = takeNext($word);
switchWord($word, nextWord);
} 
}

function showLetter($letter, $word, $bool, $duration) {
$letter.addClass('in').removeClass('out');

if(!$letter.is(':last-child')) { 
setTimeout(function(){ showLetter($letter.next(), $word, $bool, $duration); }, $duration); 
} else { 
if($word.parents('.sp-headline').hasClass('type')) { setTimeout(function(){ $word.parents('.sp-words-wrapper').addClass('waiting'); }, 200);}
if(!$bool) { setTimeout(function(){ hideWord($word) }, animationDelay) }
}
}

function takeNext($word) {
return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
}

function takePrev($word) {
return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last();
}

function switchWord($oldWord, $newWord) {
$oldWord.removeClass('is-visible').addClass('is-hidden');
$newWord.removeClass('is-hidden').addClass('is-visible');
}
});

</script>

 

So sorry! I am jus barely seeing your reply as I was never notified of your response. Thank you so much! That was my only issue - improperly inputting the js code injection.