Leaderboard

There are a bunch of ways you could do this, and I'm not quite sure which effect you're after but here's a fork that might be close: https://codepen.io/GreenSock/pen/321d558bd58fe43f7083a29aab813bb2 Basically, you can just create your animations linearly, but then actually tween the playhead of the main timeline in a way that has an ease! If, on the other hand, you actually want to keep the fading durations consistent (so each one fades at exactly the same rate, but you're only accelerating the duration of the text staying opaque), that's a whole different beast (more complex, but doable). Just let us know exactly what effect you're going for and we'll see what we can do. If you're merely looking to accelerate the staggers themselves, you'll love the new advanced staggering feature that was added in GSAP 2.1. Read about it here: https://codepen.io/GreenSock/full/jdawKx I hope to see your name on the membership roster soon

Hi @Exhumator, This could be a way ... https://codepen.io/mikeK/pen/orEWOX Happy tweening on Sunday ... Mikel

Let's break down what your code is doing: // Setting the element's text to this string (at the beginning) tl.set("#message", { text: "this works well" }); // Setting the element's text to a random value in the array (at the beginning) tl.set("#message", { text: function() { return getRandomValueFromArray(messages); } }); // Animating the message's color to red tl.to("#message", 1, { color: "red" }); GSAP assumes that only the animations should be repeated when the timeline is replayed, not the .set() calls and and animations. In order to have it do both, you should put the set call inside of the onRepeat callback. You also need to set the position in the timeline of it to 0, but I'm not quite sure why you need to do that (maybe @GreenSock or another mod can help me out with understanding why). The code would then look like this: var messages = ["1", "2", "3", "4", "5"]; var tl = new TimelineMax({ repeat: -1, onRepeat: function() { tl.set("#message", { text: function() { return getRandomValueFromArray(messages); } }, 0); } }); function getRandomValueFromArray(a) { return a[Math.floor( Math.random() * a.length )]; } tl.set("#message", { text: "this works well" }); tl.to("#message", 1, { color: "red" }); https://codepen.io/ZachSaucier/pen/NZyvLG?editors=0010

Hi @clickdeproduto, Hi Zach, To use SVG is super ... https://codepen.io/mikeK/pen/VJQyrB Happy tweening ... Mikel

That is necessary because you're adding that set() to the existing timeline. If you added it without the position parameter of 0, it would simply get added to the end of the timeline. All the sets that you're adding wouldn't really appear to fire because the timeline starts over and the first message set() of "this works well" would appear instantly. You can check the children on each iteration: console.log(tl.getChildren().length); I'm not sure using a timeline here has any real advantage and you're adding children with each repeat. If it were me, I'd probably just put this in a function that calls itself when the color tween completes. Maybe something like this: https://codepen.io/PointC/pen/YoeEWp Happy tweening. Edit: Whoops — looks like @mikel did the same thing, but I hadn't looked at his demo yet.

You could look into a polyfill for old browsers that don't support background-clip: text; Otherwise you would have to use a different approach, like using SVG or canvas. I didn't look into the support tables to see which approach has the best support. But GSAP can animate those just fine. SVG demo: https://codepen.io/brenna/pen/mybQVx

As for your modifiers approach, I am not sure if modifiers work with the text attribute. I do know that the modifier should be on the .to, not the .set call though. It's possible my approach is wrong. Maybe @GreenSock or another mod can help here as well.

Things like background-clip and text-fill-color are CSS properties - there's no way to do things like that in JavaScript alone (you always need some HTML and CSS along with JS to view it in a browser). You could set those properties with JS/GSAP if you'd like to, but it's up to you whether you want to set those properties in your JS or CSS.

Thanks for the reply, @ZachSaucier It's being loaded correctly (logged it as `function Plugin…`). And I found the solution myself. Instead of passing the IDs of the elements to be morphed I tried to pass the elements themselves. Now it's working.

Seems fine in Firefox to me. Maybe others see something different? I'm seeing it work in Edge as well, but the gradient is a bit funky. What did you mean here: You're animating with GSAP so I'm confused. Did you mean without the SplitText plugin and only use the core tools?

You're welcome. For styles I'm an old fashioned guy and use SASS in separate files. I just don't like styled components. There used to be this concept called "Separations of Concerns" which I still follow to this day. IMHO styles go with styles, pure JS goes with pure JS and React code goes with React code, but again that's just my and my two cents on the subject. If you use breakpoints for animations my advice would be to use the context API and the root component of your app to keep track of the screen size. Like that you can check the screen size when creating/running your animations on every component in the app without the need of passing props down the component tree. Of course if at some point you plan to implement redux you can use it as well to spread the screen size from a single component that listens to the window resize event. The jumpy behaviour could be related to sub-pixel rendering but if you're using x and y that shouldn't be an issue. Perhaps the content your animating is creating the issue, maybe large images with transparency or shadows. Those things normally cause a lot of stress on the rendering engine. This is just on safari? Chrome, Firefox, Edge work OK? Happy Tweening!!

Hi @Rodrigo, thank you for your reply, I am using Vuejs and the project is created with Vue CLI 3 (webpack). You are actually right, it seems it has to do with tree shaking, I didn't think of it since I didn't have this issue before. So I got it working with two ways, the important part seems to be to reference the plugin in your code import Draggable from 'gsap/Draggable' import '@/assets/vendor/ThrowPropsPlugin' import ModifiersPlugin from 'gsap/ModifiersPlugin' import {TweenLite, TweenMax, Linear} from 'gsap' //or according to the docs import '@/assets/vendor/ThrowPropsPlugin' import {TweenLite, TweenMax, Linear, ModifiersPlugin, Draggable} from 'gsap/all' // mounted hook const plugins = [ModifiersPlugin] It feels it's not the prettiest solution but I guess it's the only one thanks a lot for your help!

The Stackoverflow effect! I think most people have this fear, but as you've seen, this forum is totally different. And when it comes to programming, I don't think there are any dumb questions.