JSBx

Thanks i will try this out on monday on the project itself. I thought it was supposed to autopause when you add them to another timeline. i think i remembered reading that it was unnecessary to pause them. So why does the delay affect this? is there a way to use a delay in there without needing to pause it? The whole idea of the delay was because im calling another timeline before that one. If this is the expected behavior i might default to always adding pause. I will mark this as solved on monday if it solves my problem in the project. (it should) thanks again fir the help as this was stumping me for a few days as i had based this on a tutorial which ofcourse didnt have the delay in it.

Okay i tried adding the render option to false but that will move up the problem to the previous set being called before set1. And if i add it to all of them the first set will just repeat. I have had the time now to create a codepen demo of the problem and added it to the main post. I was hoping to keep the code nicely organized y using multiple timelines but might have to resort to using only 1 for the sake of getting it done. EDIT: added this section I did enjoy the video and learned a bit more about the rendering and saving of the properties. But it seems to me that that shouldn't cause the problem as i am targeting different elements. If there is a better way of doing this i am open to suggestions. I just thought of seperating the two main "slides" and syncing them up using a main timeline was the ideal way of keeping the code organized

I have a problem with my current code, it seems to big of a hassle to put in codepen and make it work since it has lots external files so i am only posting the relevant JS code. var tlAddDevices = new TimelineLite(); tlAddDevices.fromTo(desktopHome, devicesTime, {x: -100,y: 100,opacity: 1,display: "block"}, {x: -100,y: 170,opacity: 1,zIndex: -1,},0); tlAddDevices.fromTo(laptopHome, devicesTime, {x: -600,y: 170,opacity: 0,display: "block"}, {x: -420,y: 371,opacity: 1,},0); tlAddDevices.fromTo(tabletHome, devicesTime, {x: -0,y: 170,opacity: 0,display: "block"}, {x: -130,y: 429,opacity: 1,},0); tlAddDevices.fromTo(smartphoneHome, devicesTime, {x: -100,y: 400,opacity: 0,display: "block",zoom: 0.5}, {x: 0,y: 446,opacity: 1,zoom: 1,},0); tlAddDevices.fromTo(bmw1, devicesTime, {x: 0,y: -70,opacity: 1,display: "block",}, {x: 0,y: 0,opacity: 1,},0); var removeDevicesTL = new TimelineMax() removeDevicesTL.to(laptopHome, 2, { opacity: 0, x: 100 },0); removeDevicesTL.to(tabletHome, 1.5, { opacity: 0, x: 100 },1); removeDevicesTL.to(smartphoneHome, 1, { opacity: 0, x: 100 },1.5); var tl3 = new TimelineMax(); var showTextLength = 3; tl3.add("startDekstopSlideshow") .to(bmw2, transitionDuration, { opacity: 1}) .to(bmw3, transitionDuration, { opacity: 1 }) .add("showEIX") .to(iex, transitionDuration, { opacity: 1 }) .add("showWeekendDeals") .to(weekendDeals, transitionDuration, { opacity: 1 }) tl3.add("showDashboard") tl3.to(dashboard, transitionDuration, { opacity: 1 }) .add("end") var tlText = new TimelineMax() .add("Branded-Leads") .to(textSlides[0], transitionDuration, { opacity: 1, y: "+=100" }) .to(textSlides[0], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) .set(textSlides[0], { y: "-=100" }) tlText.add("Groot-bereik"); tlText.to(textSlides[1], transitionDuration, { opacity: 1, y: "+=100"}) tlText.to(textSlides[1], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) tlText.set(textSlides[1], { y: "-=100" }) tlText.add("Dashboard"); tlText.to(textSlides[2], transitionDuration, { opacity: 1, y: "+=100"}) tlText.to(textSlides[2], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) tlText.set(textSlides[2], { y: "-=100" }) tlText.add("Demo"); tlText.to(textSlides[3], transitionDuration, { opacity: 1, y: "+=100" }) //tlText.to(textSlides[3], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) //tlText.set(textSlides[3], { y: "-=100" }) tlText.add("endText") var mainTimeLine = new TimelineLite() .add(tlAddDevices) .add("set1","+=2") .add(tl3.tweenFromTo("startDekstopSlideshow", "showEIX"),"set1") .add(tlText.tweenFromTo("Branded-leads", "Groot-bereik"),"set1") .add("set2") .add(removeDevicesTL,"set2") .add(tl3.tweenFromTo("showEIX", "showWeekendDeals"),"set2") .add(tlText.tweenFromTo("Groot-bereik", "Dashboard"),"set2") .add("set3") .add(tl3.tweenFromTo("showWeekendDeals", "showDashboard"),"set3") .add(tlText.tweenFromTo("Dashboard", "Demo"),"set3") .add("set4") .add(tl3.tweenFromTo("showDashboard", "end"),"set4") .add(tlText.tweenFromTo("Demo", "endText"),"set4") When i use this code i expected the mainTimeline to play the sets in order but for some reason it seems to start with the last set (set4) and then start properly from set1 all the way to set4 and stop like i expect it to. Maybe i am misunderstanding this. I have all the imgs (iex bmw1 bmw2 etc) opacity set to 0 using css but they instantly appear. I will try later to create a codepen to replicate this but maybe it is possible to see my error via this code? EDIT: Added codepen demo

Thanks i will try this out, enjoying this library a lot

I have created multiple timelines with have different labels. Is it possible to call these labels using a main timeline? example: tlText.add("tekst4"); tlText.to(textSlides[3], transitionDuration, { opacity: 1, y: "+=100" }) tlText.to(textSlides[3], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) tlText.set(textSlides[3], { y: "-=100" }) tlText.pause(); mainTimeLine.add(tl) mainTimeLine.add(tlText.play("tekst4"));// like this? mainTimeLine.add(removeDevicesTL,5); I want to use the main timeline to controll all the others? Or is the best approach to just make it all on the same timeline and stop the animation from the start and use the tweenFromTo()? This last approach seems to unorganized. Thanks in advance for the help