Radar18
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Radar18
-
-
Hi,I'm trying to edit one of your SplitText demos.
The demo (Swing Drop Flicker) is on Codepen (see Codepen below).
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.
See the Pen nQzyxo by GreenSock (@GreenSock) on CodePen
-
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!
- 2
-
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,
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?
-
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).
Problem editing a GSAP script
in GSAP
Posted
@ryan_labar, thanks for your help. Got it! It's working now!
Also, point taken re. FOUC. Will consider this further. Much appreciated!