Jump to content
Search Community

Custom animation clock source

Henke37 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

So I have an oddball project where I run animations in sync with an externally provided object (mostly embedded youtube players) and I want to sync the animation up with the object, even if said object runs slow/fast/jumps around. How do I override the used clock so that I can provide a custom one?

Link to comment
Share on other sites

If you can tap into the progress property of the external object, you can pass that value to the .progress() method on a Tween or Timeline.

 

Example 

 

timeline.progress(.5);

 

This is a method used for lots of things, most commonly tying the tween/timeline to a scroll position.

  • Like 3
Link to comment
Share on other sites

Just now, Henke37 said:

That seems like it is for when I want to seek. I want to entirely replace the clock so that the value is automatically fetched from my source each animation frame.

 

Seeking is one use of that for sure. But you can constantly poll the progress attribute of your external object and pass that value to the Tween/Timeline's progress() to control its playback.

 

Link to comment
Share on other sites

That's what I want to automate. I want to replace the polling that GS does automatically with polling that uses my timing source.

 

Well, I don't mind GS deciding when to poll. I just want to override the result.

Link to comment
Share on other sites

2 minutes ago, Henke37 said:

That's what I want to automate. I want to replace the polling that GS does automatically with polling that uses my timing source.

 

Well, I don't mind GS deciding when to poll. I just want to override the result.

 

What I mean here wouldn't be GSAP polling anything ... it would be your own code requesting the progress value (or currentTime/duration) and passing that to a Tween/Timeline's .progress().  GSAP is doing nothing to request it ... you're pushing it to GSAP.

  • Like 3
Link to comment
Share on other sites

Yep, Shaun's approach seems right on to me. There isn't a way to hijack GSAP's root-level timing mechanism, but that really shouldn't be necessary (well, at least from what I can see). You can simply pause() the timeline/tween and then have total control over its playhead by setting either its time() or progress() in whatever way you please. See what I mean? 

  • Like 3
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...