wojmirek

Thank you for the explanation. But I can't think of a way to do it using immediateRender: false. I need to hide it first and then show it again, so I would imagine in one timeline something like this, but it doesn't work the way I would like: gsap.timeline() .to("#Path_1", {opacity: 0, duration: 1}) .to("#Path_2", {opacity: 0, duration: 1}, "<") .to("#Path_3", {opacity: 0, duration: 1}, "<") .to("#Path_4", {opacity: 0, duration: 1}, "<") .to("#Path_5", {opacity: 0, duration: 1}, "<") .to("#Path_6", {opacity: 0, duration: 1}, "<") .set("#Path_1", {opacity: 1}) .set("#Path_2", {opacity: 1}) .set("#Path_3", {opacity: 1}) .set("#Path_4", {opacity: 1}) .set("#Path_5", {opacity: 1}) .set("#Path_6", {opacity: 1}) .from("#Path_1", {duration: 1, x: -200, opacity: 0, immediateRender: false},) .from("#Path_2", {duration: 1, x: -150, opacity: 0, immediateRender: false}, "-=0.8") .from("#Path_3", {duration: 1, y: 50, opacity: 0, immediateRender: false}, "-=0.5") .from("#Path_4", {duration: 1, scaleX: 0, scaleY: 0, transformOrigin: '50% 50%', immediateRender: false}, "-=0.5") .from("#Path_5", {duration: 1, y: 50, opacity: 0, immediateRender: false}, "-=1") .from("#Path_6", {duration: 0.5, x: -30, opacity: 0, immediateRender: false}, "-=0.5") My solution on CodePen works, but sometimes it happens to someone that the animation disappears for the reason you described. Do you think it helps to just increase the delay between the first and second animation from 2.5 to 3 seconds?

Thank you for your answer. The problem is mainly that first I want the animation to fade out after some delay. Then I want the elements to appear gradually. I solved this by creating two timelines, and when one completes, the other starts. You can see an example: https://codepen.io/wojmirek/pen/LYdXWBB Unfortunately, it sometimes happens that the animation fades and no more elements appear. I don't understand why this happens. I haven't found any logic in when it happens, but it happens sometimes. Any idea why this might be happening? Could it possibly be solved even better? EDIT: I'm just wondering: The first animation takes 1.4s + 1s = 2.4s and the second animation starts after 2.5s ... Could it be that there is some unexpected delay and the animation remains hidden because of that? EDIT2: If I use the ">" positioning call, the second animation does not wait for the end of first animation, but starts immediately. masterTL.call(fadingTL, null, this ) masterTL.call(animTL, null, ">" )

Hello, is there better way to handling delays than setTimeout ? The smooth fading doesn't work for me, if I move the .fromTo to the timeline. gsap.fromTo("#Group", {opacity: 1}, {duration: 1, delay:1.4, opacity: 0}) setTimeout(()=> { gsap.timeline() .set("#Group", {opacity: 1}) .from("#Path_1", {duration: 1, x: -200, opacity: 0},) .from("#Path_2", {duration: 1, x: -150, opacity: 0}, "-=0.8") .from("#Path_3", {duration: 1, y: 50, opacity: 0}, "-=0.5") .from("#Path_4", {duration: 1, scaleX: 0, scaleY: 0, transformOrigin: '50% 50%'}, "-=0.5") .from("#Path_5", {duration: 1, y: 50, opacity: 0}, "-=1") .from("#Path_6", {duration: 0.5, x: -30, opacity: 0}, "-=0.5") },2500) SVG looks like this: <svg .....> <g id="Group"> <path id="Path_1"></path> ... </g> </svg> Thank you.