Jump to content
Search Community

Cannot run nested timeline a second time?

NubieHere test
Moderator Tag

Recommended Posts

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

 

Link to comment
Share on other sites

 

Hey @NubieHere

 

Your demos don't need to have the exact same setup as your original project, as long as they reproduce your issue.

In many cases they can be simplified a lot to get to the core of what's causing your troubles.

 

I'm not sure what your someElementOff() looks like here, but even without that, you might be creating .fom() logic issues as mentioned in this article about the most common GSAP mistakes.

 

Maybe the solution to the issue is as easy as changing your .from()-tween to a .fromTo() tween. Hope this helps.

 

See the Pen 09d3f08f6aba45d530656807cb7172e4 by akapowl (@akapowl) on CodePen

 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 

Yeah, I was going to guess, that you might have forgotten the second object - glad you got it figured out :) 

 

2 minutes ago, NubieHere said:

don't know why I'd have to spent the better part to this morning pulling my hair on stuff like this ... ; )

 

That's where that article linked to above comes in really handy.

It's a good point to come back to when you seamingly run into an inexplicable issue.

 

Good luck with your project and happy tweening.

 

  • Like 3
Link to comment
Share on other sites

glad to see @akapowl's excellent advice helped.

 

the core of this issue is most likely related to the immediateRender property on from() and fromTo() tweens (as addressed in the common mistakes article)

the video in this article below goes into more detail on why immediateRender is true by default and sometimes problematic. Although it uses the older GSAP syntax the same concept applies to what you are doing with GSAP 3 and nested timelines. 

 

There is a new immediateRender video on the way soon.

 

  • Like 3
Link to comment
Share on other sites

@Carl, I remember watching a video on your YouTube channel lately, that pretty much showcased the issue mentioned, on purpose adding .from()-tweens to a timeline in a later position. Wanted to link to it, but couldn't recall which one it was. Maybe you remember?

 

Edit: Okay, that appears to have been a whole different thing in a different context 😅 Sorry

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