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.

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})`; }

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; } } });

About an hour after posting this, it dawned on me that I was more than likely going about this in a very convoluted way. Your solution is brilliant, simple, and elegant. I'm sure I can make this work with some fiddling. Thank you so much, this is exactly what I'm looking for!

Hi, I'm currently trying to build a little portfolio page with React + GSAP + ScrollTrigger. One of the ideas I've had is quite simple (It might sound nonsensical but I am planning to imitate a Buffer Overflow where the inserted text is quite commonly just a lot of A's): When the user scrolls down, A's are added to my name until I reach the edge of the screen. I then plan to proceed from there but I've not gotten any further. I've implemented the functionality as best as I knew how, however, when I launch and load the webpage, it takes quite a while until it finishes loading, with Firefox even warning me that the page is slowing down my browser. I can't help but think that this is related to the amount of ScrollTriggers I'm using (about 125~ on my monitor) and I'm wondering if I'm just doing it in a very inefficient way. I'm quite new to both react and gsap so any pointers would be appreciated. Thank you for your help. Here is the stackblitz (You might have to edit the code by inserting a variable on a random line [let a = 'a'] to get stackblitz to refresh if it only shows you one trigger. You can also force it by changing overflowCounter on line 106 to, say, 200.): https://stackblitz.com/edit/react-5jrzb7?file=src/App.js