Radar18

@ryan_labar, thanks for your help. Got it! It's working now! Also, point taken re. FOUC. Will consider this further. Much appreciated!

Hi, I'm trying to edit one of your SplitText demos. The demo (Swing Drop Flicker) is on Codepen (see Codepen below). https://codepen.io/GreenSock/pen/nQzyxo In the original GSAP demo, the text is set to visibility:hidden using CSS. Once animation starts, the GSAP JS script animates the text opacity using autoAlpha:1 so that the text fades in to view. CSS #my-animated-txt{ font-size:32px; text-align:center; color:#f00; visibility:hidden; } let tl2 = gsap.timeline({}); theElement = document.getElementById("my-animated-txt"), split = new SplitText(theElement, {type:"chars", position:"absolute"}); for (i = 0; i < split.chars.length; i++) { tl2.fromTo(split.chars[i], 2.4, {transformOrigin:"center -160px", z:0.1, rotation:((Math.random() < 0.5) ? 90 : -90)}, {rotation:0, ease:Elastic.easeOut, autoAlpha:1}, 0.3 + i * 0.06); tl2.to(split.chars[i], 0.6, {y:96, ease:Bounce.easeOut}, 3.4 + Math.random() * 0.6); } My question is: rather than using CSS to initially set the text to be animated to visibility:hidden (opacity:0), is it possible to set the text to visibility:hidden (opacity:0) in the GSAP script? I've tried a few things but cannot get it to work. For example, I've tried to use set() to set the text to opacity:0, but this doesn't work - the text remains invisible throughout the whole animation: gsap.set("#my-animated-txt", {opacity: 0}); let tl2 = gsap.timeline({}); theElement = document.getElementById("my-animated-txt"), split = new SplitText(theElement, {type:"chars", position:"absolute"}); for (i = 0; i < split.chars.length; i++) { tl2.fromTo(split.chars[i], 2.4, {transformOrigin:"center -160px", z:0.1, rotation:((Math.random() < 0.5) ? 90 : -90)}, {rotation:0, ease:Elastic.easeOut, autoAlpha:1}, 0.3 + i * 0.06); tl2.to(split.chars[i], 0.6, {y:96, ease:Bounce.easeOut}, 3.4 + Math.random() * 0.6); } I've also tried initially setting the text to autoAlpha:0 in the GSAP fromto tween: tl2.fromTo(split.chars[i], 2.4, {transformOrigin:"center -160px", z:0.1, rotation:((Math.random() < 0.5) ? 90 : -90), autoAlpha:0}, {rotation:0, ease:Elastic.easeOut, autoAlpha:1}, 0.3 + i * 0.06); ... but this does not seem to work either. Hoping someone can give me some advice on this.

@mvaneijgen, Thanks for your reply and your help! Yes, your solution works exactly as I wanted. I did suspect at one point that each animation may need to be reversed before the next takes place but I couldn't work out a way to do this. I've got a lot more learning to do to become familiar with GSAP. Once again, many thanks!

Hi there, I'm trying to animate a spritesheet. Checked through the forums and a few people recommend using SteppedEase, which I've got working without too many problems: var tl1 = gsap.timeline(); tl1.to('.character1',3,{delay:3, repeat: 0, x:-3600, ease:SteppedEase.config(9)}); (See also attached codepen. Note that the spritesheet is really clunky. I just roughed it up quickly to try to illustrate what I'm trying to do). The problem is, I want the spritesheet to animate once, then pause (or delay) for 3secs, then play again, pause 3 seconds, then play again. All up, repeat 3 times with a delay (say, 3 seconds) between each SteppedEase animation. I'm using the following code: var tl1 = gsap.timeline(); tl1.to('.character1',3,{delay:3, repeat: 0, x:-3600, ease:SteppedEase.config(9)}); var tl2 = gsap.timeline(); tl2.to('.character1',3,{delay:3, repeat: 0, x:-3600, ease:SteppedEase.config(9)}); var tl3 = gsap.timeline(); tl3.to('.character1',3,{delay:3, repeat: 0, x:-3600, ease:SteppedEase.config(9)}); var master = gsap.timeline(); master.add(tl1).add(tl2).add(tl3); Unfortunately, this code is not working. The animation plays ONCE ONLY, and then stops. Hoping someone can explain what I'm doing wrong. Thanks.

Hi @Rodrigo Hey, think I got it! ? See Codepen below. Is this the correct way to do it? I mean, it seems to work but is the code valid / acceptable? Regards, Radar https://codepen.io/Radar18/pen/vYjvJjY

Hi @Rodrigo, Thanks for responding. OK, I understand your explanation but I'm hoping I can get the wheel to automatically slow down after a few seconds, without the user having to click a button. I've just had a look through GSAP docs and it looks like you can call a function from a timeline. I've had a go at doing this but it doesn't work (see new CodePen below) - probably because I suck at coding?. Wondering what I've done wrong? https://codepen.io/Radar18/pen/ZEoVJGJ

Hi All, Trying to work out how to tween timeScale. I want a car wheel to spin but gradually slow (decelerate) to a stop. (I'm using a square in the CodePen). Tried tons of tutes and code examples - my latest attempt is shown in the attached CodePen. Too bad the only thing spinning correctly is my head ? Hoping someone can show me how I can twee timeScale() correctly (if that is indeed the best way to approach this problemo).