Rainbow Text Animation

[Ascor]

Hi everyone! I'm trying to create a rainbow text animation similar to the one in the codepen above. The trouble is, that I can not, for the life of me, figure out how to achieve this independently of the x parameter with modifiers. So, no movement, just a rainbow effect over time.

 

My GSAP Syntax Knowledge is very weak so if you could give me some general pointers there, that'd be great. I don't understand why we get to include "vw / 200" in the argument list for .to, for example. I thought it was just 'property_to_animate, options_for_animation'.

 

Thank you!

 

 

Edit:

 

I've figured it out. In case anyone finds this useful...

 

Syntax for .to is  'property_to_animate, duration, options_for_animation' as far as I understand it.

// Assign arbitrary "red" value to div. We animate this later to achieve dynamism.

<div class="words" red='0'></div>


let tl = new TimelineMax({repeat: -1})
            .set(words, {red: 0}) // Set animation value to 0 on start of timeline loop
            .to(words, 2, { // Take 2 seconds to animate this...
                red: 255, // Max animation value
                ease: SlowMo.ease.config(0.1, 0.7, false),
                modifiers: {
                    red: function (x) { // Modify our arbitrary property.
                        for (let i = 0; i < total; i++) {
                            let index = i + 25 + x * 0.4;
                            chars[i].style.color = sinebow(freq, freq, freq, 0, 2, 4, index);
                        }
                        return x;
                    }
                }
            });

 

See the Pen rLzeaO?editors=1111 by osublake (@osublake) on CodePen

[mvaneijgen]

Hi @Ascor

 

As you maybe have noticed this demo uses a really old version of GSAP which still used TimelineMax and thus it also uses the old syntax. The .to() tween with vw / 200 is in the place where you put the duration in the old syntax, so it gets the with of the browser / 200, which on my screen is around 7 seconds, so the animation takes 7 seconds. 

 

It also uses a the x value to update the color, seen that you don't want this feature you could use some other property and use that as the modifier. I don't know what this would entail, but it works. I've given the words element a data-attr or number which starts at 0 and gets updated the same as the X would do, but this isn't visible. This is a really particular demo, so If I just wanted to update the colors I would maybe rewrite it to just do that, but I'm not looking for a rainbow effect at the moment, so I'll leave that to yo if you want to go that route. 

 

Next time please post a minimal demo of your self in which you show what you've already tried, this way we can better understand your thought process and thus better help you. Even a not working demo gives great insight in what you were thinking of doing and this allows everyone here to jump off where you left off. 

 

Sidenote: Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

See the Pen vYQrmgz?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

[Ascor]

Hm... Upon closer inspection, this seems to work in CodePen but not when I use this in a Tampermonkey injected userscript. The issue is, that when I inject this, the timeline seems to play once (Colors are set to rainbows) but then it doesn't repeat/animate so there's no change over time.

 

This is how the code gets called:

 

if (possible_child.nodeType !== Node.TEXT_NODE) {
	new_node.appendChild(possible_child)
} else {
    new_node.appendChild(make_text_sinebow(possible_child.nodeValue))
}

function make_text_sinebow(text_to_rainbowify) {
        let container_div = document.createElement('div')
        container_div.setAttribute('class', 'rainbow')
        console.log(container_div)
        let split = text_to_rainbowify.split("");
        let words = split.reduce(wrapText, container_div);
        let chars = words.children;
        let total = words.children.length;

        let tl = gsap.timeline({repeat: -1})
            .set(words, {red: 0})
            .to(words, 15, {
                red: 255,
                modifiers: {
                    red: function (x) {
                        console.log(x)
                        for (let i = 0; i < total; i++) {
                            let index = i + 25 + x * 0.4;
                            chars[i].style.color = sinebow(freq, freq, freq, 0, 2, 4, index);
                        }
                        return x;
                    }
                }
            });

        return container_div
    }

    function wrapText(parent, letter, i) {
        let span = document.createElement("span");
        span.textContent = letter;
        span.style.color = sinebow(freq, freq, freq, 0, 2, 4, i + 25);
        console.log(parent)
        parent.appendChild(span);
        return parent;
    }

    function sinebow(freq1, freq2, freq3, phase1, phase2, phase3, i) {
        let width = 127;
        let center = 128;

        let r = Math.sin(freq1 * i + phase1) * width + center;
        let g = Math.sin(freq2 * i + phase2) * width + center;
        let b = Math.sin(freq3 * i + phase3) * width + center;

        return `rgb(${r >> 0},${g >> 0},${b >> 0})`;
    }

 

[mvaneijgen]

🤷‍♂️ I don't know what to tell you. Then it's time for debugging and try to figure out why it wouldn't work in Tampermonkey as you said it works in codepen, so I wouldn't see why it wouldn't work on your end. Good luck with debugging. 

[Ascor]

Pretty much but thanks for your help, @mvaneijgen

 

Edit: The issue is related to animating elements BEFORE they are added to the DOM tree. Animate after to ensure the timeline plays.