Jump to content


Animation synchronize with timeline

Recommended Posts

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

// When user click will seek to second 7
document.querySelector('timelineBar').addEventListener('click', function() {


Link to comment
Share on other sites

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


  • Like 2
Link to comment
Share on other sites



  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.