Jump to content
Search Community

ngocducdim

Members

  • Posts

    16

  • Joined

  • Last visited

 Content Type 

Posts posted by ngocducdim

    Timeline trigger all callbacks with specific timing when play

    in GSAP

    Posted

    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();
    });

    Timeline trigger all callbacks with specific timing when play

    in GSAP

    Posted

    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()

    See the Pen abQzoRa?editors=1111 by Duc-Dim (@Duc-Dim) on CodePen

    Timeline trigger all callbacks with specific timing when play

    in GSAP

    Posted

    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

    See the Pen wvQBwra by Duc-Dim (@Duc-Dim) on CodePen

    Parent timeline add many child timeline & play follow position not working

    in GSAP

    Posted

    - 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!

    Parent timeline add many child timeline & play follow position not working

    in GSAP

    Posted

    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}

    Parent timeline add many child timeline & play follow position not working

    in GSAP

    Posted

    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

    GSAP TimeLine how to go back original position after kill Tween?

    in GSAP

    Posted

    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

    Animation synchronize with timeline

    in GSAP

    Posted

    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

×
×
  • Create New...