tanya

Hello, I'm new at GSAP and I have strange behaviour of animation on repeating. At very first time animation is fine. But in a next loops ".lines" playing just in last case. At the same time "#rectN"'s playing fine despite the are in the same group. How that could be and how to fix it? Here's my code: var timeLine = new TimelineMax({ repeat: -1, repeatDelay: 3.1 }); timeLine.set(".lines", { y: -600 }); timeLine.add([ TweenMax.from(".txt1", 1, { transformOrigin: "0% 0%", scale: 1.1, opacity: 0, y: +10, ease: Expo.easeOut }), TweenMax.from(".txt2", 1.5, { opacity: 0, y: +20, ease: Expo.easeOut, delay: 0.2 }) ], "+=0.5"); timeLine.add([ TweenMax.to(".lines", 6, { y: 0, ease: Linear.easeNone }), TweenMax.from("#rect1", 5, { y: -500, delay: 0.2, ease: Linear.easeNone }) ]); timeLine.add([ TweenMax.to(".lines", 7, { y: -600, ease: Linear.easeNone }), TweenMax.to("#rect2", 5, { y: -400, delay: 0.5, ease: Linear.easeNone }) ], "-=0.5"); timeLine.add([ TweenMax.to(".lines", 7.5, { y: 60, ease: Linear.easeNone }), TweenMax.to("#rect3", 5, { y: 400, delay: 0.6, ease: Linear.easeNone }) ], "-=0.8"); timeLine.add([ TweenMax.to(".lines", 7, { y: -560, ease: Linear.easeNone }), TweenMax.to("#rect4", 5, { y: -400, delay: 0.9, ease: Linear.easeNone }) ], "-=1"); timeLine.add([ TweenMax.to(".lines", 7, { y: 50, ease: Linear.easeNone }), TweenMax.to("#rect", 5, { y: 400, delay: 0.4, ease: Linear.easeNone }), ], "-=0.5"); timeLine.to(".txt2", 1.5, { y: -40, ease: Expo.easeOut, }, "-=1.5"); timeLine.from(".txt3", 1, { transformOrigin: "0% 0%", scale: 1.1, opacity: 0, y: +10, ease: Expo.easeOut }, "-=0.5"); timeLine.to(["#btn1", "#btn2"], 0.5, { opacity: 1, display: "block", }, "-=1"); timeLine.from(".txt4", 1.5, { transformOrigin: "0% 0%", scale: 1.1, opacity: 0, y: +10, ease: Expo.easeOut, }); timeLine.to(".txt4", 1, { opacity: 0, ease: Expo.easeOut, }, "+=0.5"); timeLine.set(".text5", { opacity: 1 }, "-=1"); timeLine.staggerFrom([".ar1", ".ar2", ".txt5"], 1.1, { opacity: 0, left: "-300px", ease: Elastic.easeOut.config(1, 0.6), }, 0.15, "-=0.55"); timeLine.to("#legal", 0.5, { opacity: 1, }, "+=2"); timeLine.to("#logoFrame", 0.5, { opacity: 1, }, "+=3"); Thanks!