Jump to content
Search Community

Animation synchronize with timeline

ngocducdim test
Moderator Tag

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
timeline.start();


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

Thanks

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.
×
×
  • Create New...