ngocducdim

Thanks for the reply, it really helpful!

Hi thanks for the reply, I was though gsap timeline is like timeline in some video editor like Adobe Premier or Sony Vegas, I'm building the project that require timeline like video editor and I use the gsap timeline for this, my project add/edit/delete tween & callback in the timeline on-the-fly(backward or forward of the playhead or at the playhead) and I think after every action like this need move around the playhead(using seek) before play the timeline right? If so, why when I seek timeline again at the current timing it won't reflect, let said current playhead timing is 3s, this one works: document.getElementById("#btn-start-timeline").addEventListener("click", () => { console.log("Play with seek"); tl.seek(3 + 0.001); tl.seek(3); tl.play(); }); but this don't: document.getElementById("#btn-start-timeline").addEventListener("click", () => { console.log("Play with seek"); tl.seek(3); tl.play(); });

For me the fix is seek the timing forward and backware before play the timeline: tl.seek(3 + 0.001); tl.seek(3); This will remove the callback at 1s, not sure why, maybe gsap timeline need recording the state again after add callback by using seek? if so do we have any method to do this instead using this 'hack', like timeline.recordingState() https://codepen.io/Duc-Dim/pen/abQzoRa?editors=1111

Hi, in the codepen I have a timeline with 10s and seek at 3s at initialize, then I click 1.Register call back button to add callback at 1s, 3s & 5s, and then I click 2. Start timeline to play the timeline, in the console I expected the output: - callback at 3s - callback at 5s But the actual output: - callback at 1s <- this one unexpected - callback at 3s - callback at 5s My question is I seek the timeline at 3s at initialize, how come when play timeline the callback at 1s get called? is there any fix or do I misunderstanding how timeline works? Thanks

Thanks for your reply! I intend to implement something like that

- Thanks for the reply, currently I'm doing a project that contain deep nested child timelines: Parent : --------------------------------------------------------------------------------------------------------------------> Child 1: --------------------------------------------------------------------> Child 2(Child 1 is parent): -------------------------------------> Child 3(Child 2 is parent): -----------------> - Those child timeline need to synchronize with parent timeline, those child timeline can seek, add pause points, but with your explain I think if I seek child timeline, I have to travel upward and calculate timing until reach the parent timeline like event propagation when we click a child element in DOM and seek the parent timeline, thanks for the help!

Assume I have parent timeline with total duration 10 seconds, and a child timeline with total duration 2 seconds, this child timeline will start at second 5 inside parent timeline, when play the parent timeline, the timing will be like this: - parent timeline current second : 0 <-> child timeline current second: 0 - parent timeline current second : 1 <-> child timeline current second: 0 - parent timeline current second : 2 <-> child timeline current second: 0 - parent timeline current second : 3 <-> child timeline current second: 0 - parent timeline current second : 4 <-> child timeline current second: 0 - parent timeline current second : 5 <-> child timeline current second: 0 - parent timeline current second : 6 <-> child timeline current second: 1 - parent timeline current second : 7 <-> child timeline current second: 2 - parent timeline current second : 8 <-> child timeline current second: 2 - parent timeline current second : 9 <-> child timeline current second: 2 - parent timeline current second : 10 <-> child timeline current second: 2 Now parent timeline current second is 10, I seek the child timeline to second 1, the result: - parent timeline current second : 10 <-> child timeline current second: 1 What I want is: - parent timeline current second : 6 <-> child timeline current second: 1 You can try the example here, let the parent timeline play finish, then click Seek child timeline to second 1, the text will show {"parent":10,"child":1} instead {"parent":6,"child":1} https://codepen.io/ngocducdim/pen/jOvxRyE?editors=1111

Sorry the problem solve because my silly mistake on code, I have fixed, but I have another question I want to ask, can I force the parent timeline synchronize with all children timeline? let say I seek first child timeline to second 0, the parent current second will be 3, if I seek second child timeline to second 1, the parent current second will be 7, is it posible? I have updated the codepen https://codepen.io/ngocducdim/pen/jOvxRyE?editors=1111

Hi, I have a parent timeline with total 10 second and 3 child timeline which will add to this parent, first child will play at second 3, second child will play at second 6 and third chill will play at second 8, but when I play a parent timeline, all child timeline play at second 3, I don't know what wrong https://codepen.io/ngocducdim/pen/jOvxRyE?editors=1111

Hi, thanks for the reply, the kill you mention above is completely kill the whole timeline? My current situation is the timeline will have many tweens (using .to and .from), and I need to edit/remove some of those tweens, but when remove I expect it come back original position but it doesn't, now have found solution that I will use .fromTo(), it more easier to control the tweens in timeline. Thanks for you help

Hi, how to kill the tween in time line and make it go back the original position? You can try the codepen, let it run finish, press kill button but still nothing happen https://codepen.io/ngocducdim/pen/rNdabRX?editors=1111

Thank guys

Hi, I want to ask can animation synchronize with timeline? Mean first we define the timeline then animation will start depend on the timeline, for example the timeline have 10 second and will run from 1 to 10, at second 2 the animation A will start and at second 6 the animation B will start, if user seek at second 7 the animation B will start half way instead from start, like ScrollTrigger with scub, for example: // Create timeline with 10 second const timeline = gsap.timeline({duration: 10}); // At second 2 this animation will run gsap.to('divA', {x: 100, y: 100, startAt: 2}); // At second 6 this animation will run gsap.to('divB', {x: 900, y: 900, startAt: 6}); // Start count from 1 to 10 timeline.start(); // When user click will seek to second 7 document.querySelector('timelineBar').addEventListener('click', function() { timeline.seek(7); }); Thanks

Ah no, just done the animation yesterday, thank you

https://codepen.io/dim0147/pen/GRONVjW This is what I have done