NubieHere

OK, full of typos here ... sorry. And thanks.

OK, problem seem to persist ... I cannot hide the element initially ... how do I do that? Wouldn't I have to hide the element using css opacity to 0, and then – before animating it – unhide it? I had hoped GSAP would take care of that for me ... I thought that's what autoAlpha was also about.

OK, and only NOW did I see you code ... thanks.

OK, back again after months and months of not using GSAP – learning everything over again. I have a very simple case of wanting to animate in a line of text – starting with it NOT being visible AT ALL. Now, I can't for the life of me figure out how to make this happen. I've tried setting the opacity to 0, fiddling around with 'to' and 'from', fiddling with AutoAlpha true/false, 0/1 and what not ... HOW can I simply make a string of text appear letter by letter using SplitText without the text showing up initially? And by the way, Codepen suck as it won't let me 'replay' the pen above – what happened to the "run" button once there (as far as I remember) – I seem to have to reload the entire page to rerun it, seriously?

OK, missed the in/InOut/Out option. Seems and 'expo.in' does the job all right.

Hi, I'm looking for an easeType of a simple drop (think golfball falls to sand – no bounce). Think gravity 9.81 ... it starts slow, accelerates and then stops. I can't seem to find anything useful when staring at the:

Yeah, tried that, but it still won't let me 'reanimate' the bugger ... have no clue what's going on!

When I use this: tl.to( all_tiles, .25, { opacity: 0, stagger: .01, onComplete: removeClass, onCompleteParams: ['on']}); // I remove the class 'on' from the element, which should then set the opacity back to 0 for me to be able to 'reanimete' them again. to 'reset' all tiles ... I cannot reanimate them again ... the 'style' property on the elements keep being: "opacity: 0" (of cource) ... But I'm using a class ('on') to set the opacity to 1 and when removing the class the opacity. How to I get rid of the style property on the elements? https://www.dropbox.com/s/z0stuaafq4umiwc/Screenshot 2021-07-04 at 12.29.03.png?dl=0

Thanks, I'm not trying to prove you wrong (I'm sure I'm the one who's wrong) ; ), but it's just that things do get fairly complicated once you have a client that says: <insert random **** here> ... so, if you want A.B.S.O.L.U.T.E. control you have to split everything up into its own little part (modular thinking is good, just not used to do it with gsap and timelines) ... and I guess, that sometimes lead to more confusion than overview (which is what we tried to achieve in the first place). And thanks for pointing Beyond the basics out ... I've just managed to do the Express one. But will have a coffee (or maybe a G&T) and watch it right away. I do think I managed to get the damn bugger to work in the end ... thanks a lot to all of you for your help. And I will create pens in the future ... will just have to think of it in the workflow ... and due to tight deadlines I couldn't find the time for now.

What is also weird is that when I add parenthesis to fadeOut() it runs immediately and not on the timeline as you suggest in your comment. It's the complete opposite ... are you sure that's how it works? That's not how it runs on my end ...

My problem is, that I'm sure it's the complexity of the banner that is causing me all the issues. So making a minimal 'version' in codepen is probably not going to replicate my issues anyway. That will only leave me with; a minimal 'version' on codepen that will work, and my own way more complex version that will not. But thanks for at least doing your best to help, totally appreciated. I'm trying to take it one step at a time ... I have tried a couple of times to recreate it at codepen ... but I cannot target my svg paths for starters ... so it'll just be more frustration than I already have trying to 'fix codepen'. And by the way, being a subscriber to Creative Coding Club – great stuff (yeah, seriously trying to learn this thing) I'd suggest you make a 'real world' scenario on actually creating a (fairly complex) banner with certain amounts of loops, fade ins, fade outs, all the bells and whistles ... as I guess A LOT of people use gsap for stuff like this. Just a suggestion ; )

OK, the parenthesis makes a difference [ .add( fadeOut() ) vs .add( fadeOut ) ] ... it triggers the function immediately. But when the function return a timeline, why does it play the timeline right away, and NOT at the end of the main timeline!?

OK, obviously not working as expected (sigh, I seriously don't know why I keep having these kind of problems). Now, it seems that the 'final' step is triggered immediately no matter WHAT the counter says. I do the following: var maxLoops = 3; var loopCount = 0; function fadeOut () { let tl_fadeout = gsap.timeline(); tl_fadeout.fromTo(header.chars, .1, { opacity: 1 }, { opacity: 0 }); return tl_fadeout; } function isFinalLoop () { loopCount++; if ( loopCount == maxLoops ) { main_tl.pause(); } } main_tl .add( getHeader() ) .add( bilforsikringFadeIn(), "-=1" ) .add( turnOnEl(), "+=1" ) .add( turnOffEl(), "+=3" ) .add( bilforsikringOff(), "-=1" ) .add( getHybrid(), "-=0" ) .add( bilforsikringOn(), "-=0" ) .add( getTextContainer(), "+=2" ) .add( getCta(), "-=.2" ) .call( isFinalLoop ) .add( fadeOut() ); Now, WHY on earth does the 'fadeOut' get triggered immediately? It runs 'on top of' the first 'getHeader' timeline as is the best way I can describe it (it seems it both fades in and out at the same time ) ... this is driving me absolutely bunkers now ...

Thanks, makes perfectly sense ... but it would also mean that the main timeline should repeat 'forever' or at least the number of maxCount ... probably having to manage the repeats using the var I guess.

I'm creating a banner that has to loop three times. Now for the animation to appear smooth, I have to kind of 'animate out' the 'final' step in order for it to be able to 'start over' for each loop. But I don't want to 'animate out' the 'final' step the LAST TIME (when the looping ends). I have absolutely no clue about how to achieve this and even where to start. If I have this: main_timeline. .add(Head) .add(Body) .add(Tail); <-- do not want this to disappear the last time around I want to repeat the main_timeline three times. And I want to basically fade out the Tail on every loop EXCEPT for the last time ... now, HOW would I set up a thing like this using gsap!? Are there some 'hidden' features for doing stuff like this (fancy switches or the like ... )?