ngocducdim

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

Hi, sorry I don't know to describe the context, I want implement the animation like this, when user scroll down it will show each person from bottom to top and then user scroll up it will revert back, I have try ScrollTrigger and don't know how to implement correctly, does anyone can give me the example? Thanks