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.

Yes, it is amazing for beginners. Just sit through and run through the documentation once, and you'll be rather proud of yourself after you understand just how simple it all really is! Tweens and Timelines might look quite overwhelming at the beginning (for a "beginner"). But like all things, when you just pull through a little bit, it really pays off.

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