Jump to content


TimelineLite Visualizer

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



Just wondering about the availability of the Timeline Visualizers as used in video at:




This page includes a few of the visualizers but they are not-editable :(


Is there any chance an editable timeline visualizer, like the one used in the video in the above page, could be made available?


I find it a great learning  tool to help me visualize timelines as I build them.


Best regards,



Link to comment
Share on other sites

Hi Trang :)


Welcome to the forums.


I'm not sure if there are any plans for that tool, but the question was asked not too long ago and this thread may help:




Carl will probably post an answer for you if there is any additional information available.


Happy tweening and welcome aboard.


  • Like 2
Link to comment
Share on other sites

The problem is that the visualizer from those demos is very "dumb" in that it isn't very flexible and was built fairly quickly just to help illustrate the concepts on that page. However, they way that it works really does show off the power of the API so maybe it would be a good idea to have a tutorial that just pokes behind the scenes of it a little bit. hmmm.

  • Like 1
Link to comment
Share on other sites

  • 5 months later...

Is there any updates on a timeline visualizer?  Maybe as a chrome dev console extension?  

Link to comment
Share on other sites

  • 1 month later...

I was just wondering the same thing after watching those videos.  Prior to seeing that visualizer, I've been thinking to myself: how is everyone planning out their timelines without seeing a visual.  Does everyone storyboard out their anims and time out that storyboard in Adobe Animate or AE first to get the timing down? I've seen some crazy animations using GSAP, and i can't imagine them being animated sheer straight-forward style

Link to comment
Share on other sites

Yeah, there are some really neat workflow tips that you can employ to make building complex animations easier. Like modularizing your code into functions (one for each section of your animation) that each return a TimelineLite/Max that you nest into a master timeline. And you can jump to certain spots while working on that particular part of the animation, like masterTimeline.play(6) to jump to the 6-second spot and play. And masterTimeline.play(6).timeScale(0.2) to jump to that spot and play it at 20% its normal speed. 


We'll probably put out an article or video in the future about that (though we've touched on it in various other articles, conference talks, etc. We also have some tools on the way that should make it even easier to preview/build animations, but I can't talk about any specifics yet ;) 


Happy tweening!

  • Like 2
Link to comment
Share on other sites

  • 4 years later...

I tried the following, just to display the current play head time, which, in conjunction with a pause button, would at least allow me to pinpoint where exactly in the timeline I wanted to insert something... But the frequent interval calls were too much in conjunction with GSAP's attempted processing, and the timer began messing with the flow of the animation itself. I'd love to see a more effective take if anyone has any ideas...


function useInterval(callback, delay) {
  const savedCallback = useRef();
  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);
  // Set up the interval.
  useEffect(() => {
    function tick() {
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
  }, [delay]);
const TimelineComponent = () => {
  const [timelineInstance] = useState(new TimelineMax())
  useEffect(() => {
    timelineInstance //... tweens
  const [timeTime, setTimeTime] = useState(0);
  useInterval(() => {
    setTimeTime(Math.round((timelineInstance.totalTime() + Number.EPSILON) * 100) / 100); // rounding to 2nd decimal place for seconds, any further digits seemed pointless to me
  }, 100); // however often you want the time to be checked
  return (
      <div ref={timelineInstance}> {/* ... */} </div>
Edited by billyZduke
this doesn't actually work, my bad
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.