Jump to content

Dave Stewart

Timeline Controller for Code Pens

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've been slowly improving my basic Timeline controller with an aim to get something pretty useful.



Currently, it has the following features:

  • A scrubable timeline
  • Buttons to play, pause and restart
  • Buttons to skip through start, end, and labels (TimelineMax only)
  • Clickable label markers (TimelineMax only)

However, the final aim was make it modular and sharable, and I've come up with a solution that allows you to add it to any Greensock Pen in 2 lines of code:


It uses the HTML import feature of Code Pen to import HTML, CSS and JavaScript in one line of HTML:


See the Pen itCkj%26%2393;%255D%255D by davestewart (@davestewart) on CodePen

You then connect your Timeline to the controller using one line of JavaScript:


You can optionally append the controller to any element in your page, by passing the container selector as a second argument:

Controller.init(tl, '#animation'); 

You can check out the example Pen here:




Note the lack of any Controller markup or logic!


The source Controller Pen is here:




Feel free to import the controller into your own Pens, and I''ll continue to add features as I think of them.




  • Like 1
Link to comment
Share on other sites

And here's an example with nested timelines:


See the Pen Gjoap?editors=101 by davestewart (@davestewart) on CodePen


The next feature will probably be to add an extra playhead to indicate the progress of the active timeline.

  • Like 3
Link to comment
Share on other sites

Hey Dave,


Thanks for sharing this. I think myself and others will find this plenty useful.

Really appreciate you taking the time to contribute.


Very neat the way you are importing it from the external pen.

Link to comment
Share on other sites

Great job Dave with the GSAP controller codepen!


It is a very handy helper for adding GSAP controls very fast..  especially with the nested timelines.. Nice!


And I second that.. i like how the external pen is imported.. cool codepen import feature.


Thanks Dave :)

Link to comment
Share on other sites

Glad to give something back!


Yes, I've now added it to all my GSAP Pens, and they are much tidier and much easier to use:




I've also broken out the code (locally) so it's a set of standalone classes which I'll be putting on Github soon. It's super easy to use, with a bunch of configs that can be configured via options, script attributes, or via the API.


The easiest way to instantiate the controller and attach it to a timeline is by simply including the script tag with some custom attributes:

<script src="/vendor/gs-ctrl/gs-ctrl.js" data-parent="body" data-timeline="tl"></script>

The script will load, then load in the UI from a separate HTML file, load the styles from a separate CSS file, then wait to attach itself to the global variable tl (or anything else you specify), and you're up and running, just like that, no need to write any JS at all. Of course you can do it manually as well, if you want.


(I aim to port the automatic attachment to the CodePen widget too)


I'm toying with the idea of allowing multiple instances too. Shouldn't be too hard, but haven't had the need yet.


What I would really like would be a designer to make it look nice. Something cool, flat, with perhaps some nice accent colors.


If anyone wants to fork the pen and get started, that would be great!   :D

Link to comment
Share on other sites

Hello Dave,


I did fork your controller and made some quick edits for CSS3 button styles.. and just some slight color changes for the progress bar and time output.


I will try to make some other style changes when i have more time..


My modified controller with CSS changes, here:

See the Pen noEzq by jonathan (@jonathan) on CodePen


Example with controller attached:

See the Pen aoefG by jonathan (@jonathan) on CodePen


On a side note.. i did notice that if any of the <button> tags have any nested tag in them, like say a <span> or whatever.. that when the controller is imported in.. GSAP will start to animate matrix3d() on the button nested html tag.. weird


Also i noticed that when the controller is imported in and say you click on the animated progress bar.. you get Time: NAN  outputted on the Time display


Cheers :)

Link to comment
Share on other sites

The "animated progress bar" is draggable / scrubbale and shows the current time as you do so.... do you not get that?

The spans in the controller are used to set the label positions, but it should be the .left, not the .x.


Anyway - some bugs to be ironed out perhaps!

Link to comment
Share on other sites

No worries great job nonetheless!


The warning codepen throws when I click or drag on the progress bar, and get NAN is this:

Content Security Policy: The page's settings blocked the loading of a resource at http://rt2.codepen.io/rt?message=%5B%7B%22channel%22%3A%22%2Fmeta%2Fhandshake%22%2C%22version%22%3A%221.0%22%2C%22supportedConnectionTypes%22%3A%5B%22callback-polling%22%5D%2C%22id%22%3A%221%22%2C%22rtData%22%3A%7B%22roomType%22%3A%22live%22%2C%22rtClientID%22%3A%22c802638ccfebb50209a14e8b76302100%22%2C%22clientRoomID%22%3A%22c802638ccfebb50209a14e8b76302100%3Alive%3AaoefG%3Aeditor%22%2C%22clientRoleID%22%3A%22c802638ccfebb50209a14e8b76302100%3Alive%3AaoefG%3Aeditor%3Arole%22%2C%22roomID%22%3A%22live%3AaoefG%22%2C%22role%22%3A%22editor%22%2C%22usesRoomData%22%3Afalse%2C%22maxMembers%22%3A0%2C%22pen%22%3A%7B%22slugHash%22%3A%22aoefG%22%7D%2C%22user%22%3A%7B%22id%22%3A56901%2C%22name%22%3A%22Jonathan%20Marzullo%22%2C%22username%22%3A%22jonathan%22%2C%22paid%22%3Atrue%2C%22planType%22%3A%22pro%22%7D%7D%7D%5D&jsonp=__jsonp4__ ("script-src http://codepen.io:80 'unsafe-eval' http://assets.codepen.io:80 http://preprocessor.codepen.io:80 https://assets.codepen.io:443 http://*.codepen.dev:80 http://*.codepen.dev:8080 https://*.codepen.dev:8080 http://*.codepen.io:8080 https://*.codepen.io:8080 http://platform.twitter.com:80 http://connect.facebook.net:80 http://www.google-analytics.com:80 https://*.google-analytics.com:443 https://*.google.com:443 http://*.wufoo.com:80 https://*.wufoo.com:443 https://*.stripe.com:443 ws://*.codepen.io:8080 ws://*.codepen.io:80 ws://*.codepen.io:443").



Link to comment
Share on other sites

Weird, I don't get that even when I use it from a non-logged-in browser. There's nothing to load in either... odd. Extension maybe? Tried it in another browser?

Link to comment
Share on other sites

I tested that on PC Windows 7 (64bit)


Firefox 30  -- saw in both native Firefox Dev Tools and Firebug

Chrome 35.0.1916.153 m  -- saw in Google Dev Tools


Weird .. I only get the error when i am logged in to codepen.. if your not seeing it..  I will notify codepen support about the content security warning.


Thanks again for checking on your end too :)

Link to comment
Share on other sites

And it happens only when you click on the timeline? Do you get any errors as the page loads?

P.S. Don't notify CodePen yet - they might decide to strip script tags!

Link to comment
Share on other sites

ok.. i wont notify them yet..


I only saw it when i clicked or dragged the timeline.. when logged in.. give me a second.. im gonna restart my computer and just make sure i didnt have any memory leaks..


.. restarting ..


Just restarted, cleared cookies and cache..  and the errors are gone now ..  I just tested in both Firefox and Chrome dev tools.. and no more warnings when logged in!


So all is Kosher now! B)

Link to comment
Share on other sites



Will look to post something on GitHub this weekend too so you can use it in your non-CodePen projects :)

Link to comment
Share on other sites

Thanks! :)

Link to comment
Share on other sites

Love seeing the progress on this.




Your version here: http://codepen.io/jonathan/pen/aoefG seems like the scrubber is wigging out when I try to grab it. 


In Chrome, it seems to flash erratically, and in FireFox it kind of locks up. Not sure what is going on.



Your original seems to be working great. Love the collection you created. Looking forward to seeing how that grows.





Link to comment
Share on other sites

Thanks Carl.. sorry it took so long to reply back.  That is weird, i was wondering why that was happening .. let me start to debug and see why it keeps getting NAN when trying to scrub the timeline. Thanks again for pointing that out :)

Link to comment
Share on other sites

Yeah weird Carl.. i even tried with Daves controller and the same thing happened..


Here check out this same pen, but it uses Daves original timelinecontroller:


See the Pen FEbzA by jonathan (@jonathan) on CodePen


I do notice that in Firefox it sometimes gives me a security content warning, for the script being imported in. Really weird.. because all i did was fork Dave's codepen timeline controller.. and just change and add CSS. :(

Link to comment
Share on other sites

After some poking around the issue seems to be related to using the controller with a timeline that has a repeat value other than 0.


If you set repeat:0 in Jonathan's cube timeline, it works fine.

Here is a simple fork of one of Dave's examples:




and it seems that if you set repeat to 0 it works fine, if not, things get a little strange.

  • Like 1
Link to comment
Share on other sites

Thanks Carl, i tried to comment out the repeat and yoyo.. but  didn't works.. Great Carl looking into that.. i really appreciate it! :)


i will take note of that when using the controller..  Have a great day!

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.