Osiris

And then there is me, who is animating everything visible for my mobile site. 90% of the entire code is for animating elements, no regret tho .

Thanks. And don't mess with the vars object, got it.

Hello, can anyone explain to me, why the following is not working (repeat needs to be added when the tween is already declared)? var myTween = gsap.to(object, {duration: 1, opacity: 0, paused: true}) myTween["vars"]["repeat"] = -1; myTween.play(); I believe the above approach is valid, because when i write the following just before i call myTween.play() myTween["vars"]["onComplete"] = function(){console.log("completed")} i can see the console output "completed", when the animation is complete. I don't understand, why myTween["vars]["repeat] = -1 does not do anything. If i call console.log(myTween) after the "repeat" thing is declared, i can see it's added in the vars object already.

Thanks for the helps guys. I am a self learner and having responses from experts like you makes the whole learning much less frustrating. I see the SVG is the next thing, i need to learn. Because it offers more compatibility than CSS and GSAP offers some love to the SVG (right?). I also see Safari is an another monster against me. @Cassie Yes, that is the thing i tried to do. But making outlines out of the texts would not suitable for me, because the gradient text that needed to be animated should be dynamic (meaning it changes depending on the context). I know, i am like an 1 year old baby trying to build a sky scraper. Anyway, i am much more insightful than i was 2 days ago. Thanks guys.

Thanks Jack. Exactly, i want to embed the gradient colors in the characters, so i can manipulate them freely ("goes with them" in a sense yes). And it's not trivial i see. Here is an example i saw while googling: https://codepen.io/giana/pen/qmKNeE Currently have no idea, how this effect is working (apparently CSS), and it uses some jQuery to select text characters and that's all it has as JS. I may give up the idea of animating gradient texts for now, maybe in the future when my understanding of CSS, JS or SVG deepens. Thanks for the reply. Have a nice day.

Thanks for the reply. Positioning chars as static makes the gradients visible on Chrome (Firefox didn't require that). That is beyond my understanding atm. I played around with your example code on codepen, and one more question (sorry), i can't simply change the opacity, the size, as well as the position of the characters, because the gradient color (and it's position, size) stays the same. Am i right? What do i do, if i want to do that? I saw an example using svg, but that was not as easy as using Splittext. Google search results some cool animations, which apparently use CSS animations, and i intend to avoid CSS animations, because GSAP looks more easier to understand. Thanks in advance.

Hello, i am trying to learn the new gsap (v3) and having a problem Splittext not working nicely with WebkitBackgroundClip on Chrome. Text just becomes invisible. Works on Firefox though. Code is very simple: ... some simple js codes ... text.style.background = "-webkit-linear-gradient(45deg, rgb(255,0,0), rgb(0,255,0))"; text.style.WebkitBackgroundClip = "text"; text.style.color = "transparent"; mySplitText = new SplitText(text, { type: "chars" }) gsap.to(mySplitText.chars, {duration: 0.25, autoAlpha: 1, stagger: 0.125}) One strange thing is, when i inspect the element.style of the text in Chrome devtools, the computed style was transformed into: background: -webkit-linear-gradient(45deg, rgb(255, 0, 0), rgb(0, 255, 0)) text; a word "text" is appended at the end. No idea, how and where this comes from. This makes the style invalid of course. And when i remove text.style.WebkitBackgroundClip = "text"; from my code, the computed style in Devtool doesn't have the word "text" at the end anymore and i can see the gradient (only the gradient box of course). (in firefox the (gradient) text appears as expected, but the animation looks wrong, (autoAlpha seems to be working there at least)). I read someone was saying in stackoverflow, that the clip shouldn't be applied on the parent element (Splittext creates an array of chars as childNodes, am i right?). Can someone point me in the right direction, how to approach this problem?