Nested timeline is not respecting its position in master timeline

[shashwatsuthar]

I have a master timeline, which consists of two child timelines. The problem I am facing is that both the timelines are firing exactly at the start, rather than going sequentially. I tried specifying the position of the second timeline using ">", but it just does not work. The second timeline still fires at the start of the entire master timeline.

 

    function Home(){
        const tl = new TimelineMax({
            onComplete: afterHomeTimeline,
            scrollTrigger:{
                trigger: ".home__card--1",
                start: "top " + $(".home__card--1").offset().top, 
                end: "top -2000",
                markers: false,
                scrub: 1, 
            }
        });

        // Below are tweens added to the Home timeline
        tl.to(".home__card--1", {y: -($(".home__card--1").offset().top - home__header_height - $(".home__card--1").offset().left)}, "0")
        tl.to(".home__card--2", {y: -($(".home__card--1").offset().top - home__header_height - $(".home__card--1").offset().left)}, "1")
        tl.to(".home__card--content-1", {"width": $(".home__card--content-1").width() - (($(".home__card--1").offset().left + $(".home__card--1").outerWidth()) - $(".home__card--2").offset().left)}, "1")
        tl.to(".home__card--3", {y: -($(".home__card--1").offset().top - home__header_height - $(".home__card--1").offset().left)}, "2")
        tl.to(".home__card--content-2", {"width": $(".home__card--content-2").width() - (($(".home__card--2").offset().left + $(".home__card--2").outerWidth()) - $(".home__card--3").offset().left)}, "2")
        tl.to(".home__scroll", {opacity: 0}, "3")
        tl.to(".home__header", {rotate: -90}, "3")
        tl.to(".home__content", {rotate: 90}, "3")
        
        var cardWidth = $(".home__card--1").width() - (($(".home__card--1").offset().left + $(".home__card--1").outerWidth()) - $(".home__card--2").offset().left - $(".home__card--1").offset().left)
        tl.to(".home__card--1", {width: cardWidth}, "4")
        tl.to(".home__card--2", {width: cardWidth}, "4")
        tl.to(".home__card--3", {width: cardWidth}, "4")
        tl.to(".home__card--1", {y: -$(".home__card--1").position().top - $(".home__card--1").position().top - $(".home__card--2").width(), rotate: -40}, "5")
        tl.to(".home__card--2", {y: -$(".home__card--2").position().top - $(".home__card--1").position().top - $(".home__card--2").width()}, "5")
        tl.to(".home__card--3", {y: -$(".home__card--3").position().top - $(".home__card--1").position().top - $(".home__card--2").width(), rotate: 40}, "5")
        tl.fromTo(".scroll__1", {opacity: 0, color: "#ffffff"}, {opacity: 1, color:"#993F3F", duration: 8}, "6");
        
        return tl;
    };

    function Portfolio(){
        const tl = new TimelineMax({
            onStart: console.log("Oh cmon it started again")
        });

        tl.to(".scroll__2", {opacity: 1, duration: 8}, ">");

        return tl;
    };

    const master = new TimelineMax();
    master.add(Home(), 1).add(Portfolio());
    console.log(master.getChildren(false,false,true))

[shashwatsuthar]

EDIT:

For anyone who sees this later-on, I solved this problem by quickly realising that it would be really helpful to run ScrollTrigger based animations in parallel all the time, therefore it made sense that GSAP would implement it by default. I realised that that was what was happening. 

To solve this, I created the second timeline inside the onComplete callback of the first ScrollTrigger based timeline, and therefore the second timeline only gets added to the master timeline whenever the first timeline finishes completely.