Jump to content


Creating a Timeline Scrubber with GS and Animate CC

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


   I am new to GreenSock and want to try using it with Canvas in Animate CC. Specifically, I want to create a timeline scrubber for my animations just like the one demonstrated here:



My question is, can this be used with Canvas in Animate? I know the way this works is by manipulating DOM elements, but could it be used to scrub through timeline animations that are created in Animate CC, or is this not possible?


In Canvas I am currently using the pressmove event and incrementing the x position of the slider within it's bounds using the ticker, but it isn't very smooth.


I reviewed the quick start for Animate CC, but I'm not sure where to go next.


So far, I am importing a scrubber and a scrub boundary movieclip from the library (shown below), but I'm stuck with how to target my scrubber and since it's not a div like in the example link above, I'm not even sure it's possible. Does anyone have any thoughts or insight?


scrubBoundary = new lib.scrubBoundary();
scrubBoundary.setBounds(247, 527, 455, 10);
scrubBoundary.x = 50;
scrubBoundary.y = 300;
bounds = scrubBoundary.getBounds();
sliderBtn = new lib.sliderBtn();
sliderBtn.cursor = "pointer";
sliderBtn.x = bounds.x + dragRadius, sliderBtn.y = bounds.y + dragRadius / 2;
sliderBtn.y = bounds.y, sliderBtn.x = bounds.x;
Thank you!

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

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


The good news is scrubbing a GSAP timeline that was created in Animate CC should be entirely possible. And yes, even though the example you linked to uses jQuery UI slider (DOM elements) there is really nothing preventing you from layering any HTML on top of the <canvas> that Animate CC exports. I suspect it might take some experimenting to make sure your timelines and variables you code in Animate CC are accessible from other JS that you create. 


If you want to do everything in Animate and build your own scrubber control that should also be entirely possible. Unfortunately I don't use Animate CC much and I'm not familiar at all with scrubBoundary or how it works. 


I'm going to move this topic to our banner forum where there are more Animate CC experts. There's a good chance they may have something built already that you can peek at.

  • Like 1
Link to comment
Share on other sites

Thanks Carl! Yes, if anyone has some insight as to how this would work with Canvas, I would be very grateful!


I was thinking that I would be able to build the slider inside of the Animate Canvas, but it seems like you're suggesting to have the divs lay on top of the canvas? I'd be interested in hearing thoughts on the best way to approach this. I think I need a push in the right direction as I'm not very familiar working with Canvas.

Link to comment
Share on other sites

  • 8 months later...

Shockingly Green Club GreenSock members have access to GSDevTools



GSDevTools provides a handy timeline scrubber and controls for  any GSAP animation (tween or timeline). Doesn't matter if you are animating SVG, DOM, Pixi.js, Three.js, or Easel.js (Animated CC)


Here is an example of using GSDevTools to control an HTML5 animation created by Flash Pro (prior to Animate CC) 



It literally takes 1 line of code to get GSDevTools to show up. Definitely check out the link above. Much easier than hand-coding it all in EaselJS

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