Animation synchronize with timeline

[ngocducdim 2 Likes (Newbie)]

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

[OSUblake 18,477 Likes (Superhero)]

Hi ngocducdim,

 

This does not create a timeline 10 seconds long.

const timeline = gsap.timeline({duration: 10});

 

You could add an empty tween to make it 10 seconds, kind of like this.

tl.set({}, {}, 10);

 

And then the rest you can do with the position parameter.

 

See the Pen PoEqwvx by GreenSock (@GreenSock) on CodePen

 

[Cassie 5,147 Likes (Superhero)]

boop 
 

 

[ngocducdim 2 Likes (Newbie)]

Thank guys