Anthony_McEvilly

Thank you, I did just type it up very quickly. But well spotted. Your 100% right that the object must exist before making the Timeline. I suppose I could append a new timeline after object creation and add it to the existing timeline. But I am going the right direction. Thanks again

Hi all, Been using GSAP and loving it. Just looking for some assistance. (Please ignore the dirty code, just made it quickly) I am after using the Timeline to animate an SVG that is created from a function within the Timeline. This code justfails as It cannot find the SVG ID even after the SVG has been created and added to the DOM: tl.from("#p" + count, { drawSVG: "0%", stagger: 0.1, duration: 1 }, "<+1"); This might not be the best approach to what I am after. But it is the only one i can think of to suit the current project. Any assistance you be much appreciated Thanks Anthony

I will give this a try thanks

Hi, I am wondering if their is a better/ dynamic way of doing this code. (so I dont have to clear the timeline/call the script more than once.) function buildA1Animation() { tl_headder.clear(); let _w = document.getElementById("A1").offsetWidth; tl_headder.set("#A1", {x: "-" + _w }); tl_headder.set("#A1", { opacity: 1 }); tl_headder.to("#A1", { duration: 2, x: "+=" + _w }); tl_headder.addPause(2) tl_headder.to("#A1", { duration: 2, x: "-" + _w }); tl_headder.set("#A1", { opacity: 0 }); } Something like this, So I only need to call "buildA1Animation();" Once function buildA1Animation() { tl_headder.set("#A1", {x: "-" + document.getElementById("A1").offsetWidth }); tl_headder.set("#A1", { opacity: 1 }); tl_headder.to("#A1", { duration: 2, x: "+=" + document.getElementById("A1").offsetWidth }); tl_headder.addPause(2) tl_headder.to("#A1", { duration: 2, x: "-" + document.getElementById("A1").offsetWidth }); tl_headder.set("#A1", { opacity: 0 }); } Any help would be appreciated. Thanks.