Jump to content
Search Community

Controlling nested timelines and repeats? How to run a nested timeline only once at the end?

NubieHere test
Moderator Tag

Recommended Posts

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

 

Link to comment
Share on other sites

keep your fade out code separate from Tail so that you can optionally play that part. create a variable to keep track of how many times the timeline plays, call a function BEFORE the fade that will check if you have played enough times. something like:

 

const maxCount = 3

const count = 0



main_timeline.add(Head)

.add(Body)

.add(Tail)

.call(checkPlayCount)

.add(Fade)



function checkPlayCount() {

count++

if (count == maxCount) {

main_timeline.pause()

}

}

 

if count is less than maxCount then the tail section will play straight through the fade.

 

it's much easier for us to provide a working example of code like this if you take the time to make a minimal demo. Hopefully this gets you in the right direction.

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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!?

Link to comment
Share on other sites

you'll really have to create a minimal demo so that I can see what is going on. you have the ability to see ALL your code AND it running in a browser. All we can do is guess at code snippets and what you might be doing wrong as you experiment.

 

a minimal demo does not have to be anything fancy. just a few elements and animations.

 

Feel free to edit this demo that shows how something like this should work.

 

you'll note the animation plays through once, fades out and then stops the second time before fading out

 

See the Pen qBrBWpK by snorkltv (@snorkltv) on CodePen

 

feel free to fork that demo to replicate what isn't working on your end. add only enough code to show a problem. thx

  • Like 4
Link to comment
Share on other sites

oh and 

 

add(fadeOut()) // adds the the timeline that fadeOut creates and returns to the main timeline

 

add(fadeOut) // calls the function fadeOut() creating a timeline that does not get added to the main timeline

  • Like 2
Link to comment
Share on other sites

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 ; )

Link to comment
Share on other sites

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

Link to comment
Share on other sites

17 minutes ago, NubieHere said:

That will only leave me with; a minimal 'version' on codepen that will work, and my own way more complex version that will not.

This is actually good, if you get it working in a simplified environment you're halfway there - then you can try and implement it and step through any issues caused.
 

 

18 minutes ago, NubieHere said:

I have tried a couple of times to recreate it at codepen ... but I cannot target my svg paths for starters

You can definitely target SVG paths in codepen.  If you have one of your attempts we'd be happy to take a look, getting comfortable with codepen is such a HUGE help. (source, ex designer who learnt how to code making SVG heavy banner ads on codepen)

  • Like 3
Link to comment
Share on other sites

Glad to hear you are a Coding Club member and are enjoying the courses!

 

Not sure how far you got but in GSAP 3 Beyond the Basics but I teach how to build this "fairly advanced" banner using functions that return timelines from the ground up

 

See the Pen BaoZKJN by snorkltv (@snorkltv) on CodePen

 

However, you're right I should have a lesson on the whole "repeat x amount of times with custom ending". FWIW I've been thinking of a course just on banners too. thx for the suggestion!

 

--

 

Great to see you are trying, but I'm firm in my belief that the issue isn't due to any complexity or related to using svgs.  I've been here 1000s of times and a minimal demo has helped me countless times with my own mistakes.

 

12 minutes ago, NubieHere said:

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

 

Again are you sure you are also returning the timeline. Again, you really have to show me something not working. Can you use my demo to prove something I said isn't correct. I'd love to clear this up, but I'm limited in what I can do.

 

 

 

  • Like 3
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

No worries, glad you got it working. I'm well aware of the "fun" of client requests, rushing to change everything, and learning at the same time. I'm sure it will all click once you've had time to clear your head and perhaps have a little more breathing room on the next project.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...