Developing Rotating Words in Header

Design help Animations & Interactions
1

Update: working by moving my HTML/CSS/JS into the custom header and an embed. Not ideal but it’s working. Still leaving this open for more Webflow-esque solutions.

Hello,
Working on my portfolio website and I’d like to add a header (h1) that includes one word that rotates in the header. I’ve tried a number of solutions online to make this work in Webflow and even built a custom animation to try and make it work on my own. However, the solutions I found online aren’t responsive or don’t work and the this was also the issue I ran into when I created my own animation.

I can get this feature working with a bit of elbow grease in HTML / CSS (the demo gif/video is from the code I exported from Webflow and worked on myself in VSCode.) It’s responsive. But I can’t get this effect working in Webflow. The sentence is: “I transform your { brand passion business vision } into a high-conversion eCommerce powerhouse.” Only one of the words in brackets is showing at a time and the others rotate in, replacing the previous word.

Code - Jason Holt Digital - Shopify _ eCommerce _ Web Flow — jason-holt-digital - 17 August 2024

Here is my public share link: [LINK](Webflow - Jason Holt Digital)
(how to access public share link)

Here’s my live site: https://jason-holt-digital.webflow.io/

2

Hi @Jason_Holt :wave: Here is a simple script sollution:

#1 For rotating texts set “default” hidden state:

image
image480×1454 63.4 KB

#2 For the first rotating texts add combo class is-active and set “show” state:

image
image480×1634 71.5 KB

#4 For the longest rotating word add a combo class or add style attribute as position: relative:

image
image3086×1098 240 KB

#4 Paste script in Before Body page settings:

<script>
document.addEventListener("DOMContentLoaded", function() {
    const items = document.querySelectorAll('.script_rotate_text_list .script_rotate_text_item');
    let currentIndex = 0;

    function rotateItems() {
        items.forEach((item, index) => {
            item.classList.toggle('is-active', index === currentIndex);
        });

        currentIndex = (currentIndex + 1) % items.length;
    }

    setInterval(rotateItems, 2500);
});
</script>

Result page and read-only :v::blush:

1 Like
3

This is great. Thank you for your help. I didn’t consider using custom element. I was trying to get the individual words in spans inside of a span and it wasn’t working too well. Thank you again.

4

In theory, everything should works with regular text elements too💁‍♂️

In this case, for a long word, you would have to use a combo class with position: relative instead of writing an attribute as in my example with Custom Element (you may add style attribute only for Custom Element cause for regular Webflow elements this attribute is “reserved” and you can’t apply it) :relieved:

1 Like