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?

See the Pen LYOyQqW by blaasvaer (@blaasvaer) on CodePen

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 ... )?

And it did in fact fix the problem ... don't know why I'd have to spent the better part to this morning pulling my hair on stuff like this ... ; )

Thanks, but if I simply change .from to .fromTo, I get:

Uncaught TypeError: o is undefined
    ea https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js:10
    fromTo https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js:10
    someElementOn file:///Applications/MAMP/htdocs/banner/V2/510_180/assets/js/animation.js:91
    <anonymous> file:///Applications/MAMP/htdocs/banner/V2/510_180/assets/js/animation.js:185
    EventListener.handleEvent* file:///Applications/MAMP/htdocs/banner/V2/510_180/assets/js/animation.js:1
gsap.min.js:10:1643

As if .fromTo is not working somehow?

OK, missed your second object ... sigh.

Tried to make a codepen but I couldn't target my SVG groups for whatever reason ... and didn't feel like spending the day trying to fix svg issues on codepen ... I'm on a deadline here ; )

But basically I'm running a range of nested timelines like this:

main_tl
    .add(getHeader())
    .add(someElementOn(), "-=.5")
    .add(turnOnEl(), "+=1")
    .add(turnOffEl(), "+=2")
    .add(someElementOff(), "-=1")
    .add(getSomeElement(), "-=0")
    .add(someElementOn(), "-=0")

If you notice, I'm trying to run 'someElementOn()', again, at the end (or some other time). But it won't animate on again the second time as it did just fine the first time. It just turn on (no animation, timing or what have you).

This is how i set (return) the timeline:

Can someone please explain to me why it wouldn't simply just run as 'expected' the second time!?

function someElementOn () {
	let tl = gsap.timeline({
		repeat: 0,
		repeatDelay: 0
	});

	tl.from(splittext_element.chars, {duration: .1, opacity: 0, stagger: 0.02 });

	return tl;
}

OOOOOOOOK! Found the bugger ... not GSAP (as usual) at all. But why it 'suddenly' happened I don't know ... but; if you use promises (the jQuery equivalent that is), by doing stuff like this:

$.when( header.text( slideObj.post_title ) )
.then(function () {
    showText( header, slideObj.post_title );

    charsCount += slideObj.post_title.length;
});

You basically 'delay' the events ... do this instead:

    header.text( slideObj.post_title;
    showText( header, slideObj.post_title );

    charsCount += slideObj.post_title.length;
 

Basically remove the $.when wrapper ... sigh. Another day wasted on front end land ...

And it has nothing to do with FOUC, as it keeps occurring in the slider (the content is loaded just fine).

Yeah, that made it even worse, now nothing is showing up ... hmm. Seriously can't figure out why this became such a mess from a WP update ... but hey, I guess that comes with the job ...

Erhm, ok ... my problem is that I animate it both IN AND OUT ... that is; initially I animate .from opacity: 0 and then .to opacity: 1 ... now I guess the problem would kick me either one way.

Thanks, that was just a spill over from all my attempt at getting it to work ... I've tried ALL variations; with, without, both, none ... it doesn't make a difference ... I'm out of options. OK, will try your suggestion of setting it to 0 ... just weird, at it's been working just fine for more than a year.

I created this smooth image slider with animated text on top using SplitText ... all was fine ... until this morning when I updated WordPress. Now, I guess this has nothing to do with WP ... and I've been trying all morning to fix it ... without any luck (as that seems to be what's needed now). Now, recreating a codepen from 441 lines of code would be a no go. But I'm basically using two methods for showing and hiding the text respectively after a certain amount of time.

I've added a delay to the .from to see where the actual flashing occurs. And I can see that the text that is about to get 'animated on' (shown), briefly show up in the browser (full opacity) before the actual tween begins from an opacity of 0. Now, I've messed around with all I can think of – also the autoAlpha, which seem to make absolutely no difference whether it's set to 0 or 1.

Can anyone spot WHY a sudden flashing would occur from the code below?

function hideText ( element ) {
    var myText = new SplitText( element, { type: "words, chars" } ),
        tl = gsap.timeline(),
        chars = myText.chars;

        tl.to(chars, { duration: fadeDuration, opacity: 0, autoAlpha: 1, stagger: 0.02 }, "+=0");
}

function showText ( element, content ) {
    $( element ).text( content );

    var myText = new SplitText( element, { type: "words, chars" } ),
        tl = gsap.timeline(),
        chars = myText.chars;

        tl.from(chars, { delay: .5, duration: fadeDuration, opacity: 0, autoAlpha: 1, stagger: 0.02, onComplete: revertText, onCompleteParams: [ myText ] }, "+=0");
}

function revertText ( myText ) {
    myText.revert();
}

Disabling the .revert() doesn't make any difference either by the way.

@Carl absolute brilliant, thanks. I need the letters to move at random speed and random interval ... but I guess I'll manage to implement specific timelines for this.