About the timeline

[ngc7293]

In version 3.1.1, this program can be executed cyclically, but not after version 3.2.x.

See the Pen GRJOyYV?editors=1111 by xf-ngc7293 (@xf-ngc7293) on CodePen

[ZachSaucier]

Hey ngc7293 and welcome.

 

I can't speak to whether or not that's a bug or a feature (Jack is better at determining what should be), but your approach is curious to me. Why not just repeat the master timeline?

See the Pen KKpyQKq?editors=0010 by GreenSock (@GreenSock) on CodePen

[GreenSock]

That was actually a bug in versions prior to 3.2 - smoothChildTiming was supposed to be false by default in everything except the globalTimeline. It has been fixed in recent versions. So the behavior you expected was actually a bug

 

So in your demo, all you need to do is set smoothChildTiming: true on the "tl" timeline so that the children get moved around as you restart() them. 

 

But like @ZachSaucier said, that reduced test case looked very strange to me. You were putting both child timelines a the exact same start time, and they're animating the same object at the same time. So you're creating conflicting tweens. And I don't understand why you'd organize things in sub-timelines like that either. Maybe it'd help if you explained what your end goal is because I suspect there's a much cleaner way of doing it. We'd love to help. 

[ngc7293]

I know it ’s weird to do this, this is my program and I ’m honored to have your guidance.

See the Pen PoqOdYX?editors=0010 by xf-ngc7293 (@xf-ngc7293) on CodePen

[GreenSock]

Did you have a particular question or concern? 250 lines of code is just a lot to dig through, so I wasn't sure if you were just sharing for the sake of sharing or if you had a question. 

 

I did notice a typo - you had var tl = gsap.timeline({default: {duration: config.duration, ease: config.ease}}); but you're missing the "s" on defaults.

 

Happy tweening!

[ngc7293]

12 hours ago, GreenSock said:

That was actually a bug in versions prior to 3.2 - smoothChildTiming was supposed to be false by default in everything except the globalTimeline. It has been fixed in recent versions. So the behavior you expected was actually a bug

 

So in your demo, all you need to do is set smoothChildTiming: true on the "tl" timeline so that the children get moved around as you restart() them. 

 

But like @ZachSaucier said, that reduced test case looked very strange to me. You were putting both child timelines a the exact same start time, and they're animating the same object at the same time. So you're creating conflicting tweens. And I don't understand why you'd organize things in sub-timelines like that either. Maybe it'd help if you explained what your end goal is because I suspect there's a much cleaner way of doing it. We'd love to help. 

The above case is what I want to achieve.

main: gsap.timeline({defaults: {duration: 2, ease: 'back.out(1)'}, paused: true, onComplete: mainComplete}),

sub: gsap.timeline({paused: false, onComplete: subComplete}),
These two callback functions(mainComplete, subComplete) call each other based on a condition, as shown in the first demo.I want some guidance to make the logic look less strange.

Thanks for your help!

[ZachSaucier]

I would set it up like I did in my demo posted above - add some animations all starting at the same to the master timeline, then add some other animations all starting at the same time to the master timeline, then repeat the master timeline.

[ngc7293]

3 hours ago, ZachSaucier said:

I would set it up like I did in my demo posted above - add some animations all starting at the same to the master timeline, then add some other animations all starting at the same time to the master timeline, then repeat the master timeline.

Thank you for your reply