Simple nested timeline question

[barrowman]

let til = gsap.timeline ()
//--------------------
let nested = gsap.timeline();
nested.to(this.Light, {duration: 1, x: 235});
til.add(nested, "+=3"); //add nested timeline after a 3-second gap
//---------------------
til.add("one", 0.0)
.add("two", 3.5)
.add("three", 4.0)
.add("four", 7.5)
.add("five", 8.0)
.add("six", 11.5)
.add("seven", 12.0)
.add("eight", 15.5)
.add("nine", 16.0)
//---------------------
.to(this.Sparkle, {duration:15.5, rotation:-720, ease:Linear.easeIn}, "one")	
//---------------------
.to(this.one, {duration:3.5, x:160, ease:Linear.easeIn}, "one")
.to(this.one, {duration:0.5, x:460, ease:Linear.easeOut}, "two")
.from(this.two,{duration:0.5, x:-160, ease:Linear.easeOut}, "two")
//---------------------
.to(this.two, {duration:3.5, x:160, ease:Linear.easeIn}, "three")
.to(this.two, {duration:0.5, x:460, ease:Linear.easeOut}, "four")
.from(this.three,{duration:0.5, x:-160, ease:Linear.easeOut}, "four")
//---------------------
.to(this.three, {duration:3.5, x:160, ease:Linear.easeIn}, "five")
.to(this.three, {duration:0.5, x:460, ease:Linear.easeOut}, "six")
.from(this.four,{duration:0.5, x:-160, ease:Linear.easeOut}, "six")
//---------------------
.to(this.four, {duration:3.5, x:160, ease:Linear.easeIn}, "seven")
.to(this.four, {duration:0.5, x:460, ease:Linear.easeOut}, "eight")
.from(this.five,{duration:0.5, x:-160, ease:Linear.easeOut}, "eight")
//---------------------
.to(this.five, {duration:3.5, x:160, ease:Linear.easeIn}, "nine")

I've simply trying to nest an animation into another timeline.

 

I want a simple looping animation that run 5x and to put that into a existing timeline, but I can't figure out the correct syntax from the document. I've pasted the top bit in with the nesting, but it doesn't work. (this was just the first step to see if I could get the nesting to work, having never done it before)

Any simple advice to get this to work?

 

Thanks in advance.

[GreenSock]

You can absolutely nest timelines like that, yes. I didn't notice any obvious errors in your code except that all your eases can simply be set to "none" - you're using the old syntax with Linear.easeIn/Linear.easeOut which is kinda odd because those would actually be identical anyway. Do you mind me asking why you chose "easeIn" and "easeOut" on Linear? Do you want any easing at all? You could also make your code much more concise by setting up a default ease on your timeline so that you can just define the ease once. 

 

If your animations aren't working, it's very difficult to say exactly why by looking at a copy/paste of a subset of the code. Can you provide a minimal demo please so we can see it in context? It doesn't need to be your real project - just the simplest possible reproduction of the problem. It can be literally one <div> if you want. 

 

I'd recommend reading this article: https://css-tricks.com/tips-for-writing-animation-code-efficiently/