Jump to content
Search Community

Timeline Controller for Code Pens

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

 

x2IgLub.png

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:

Controller.init(tl); 

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:

 

http://codepen.io/davestewart/pen/EJyge?editors=101

 

Note the lack of any Controller markup or logic!

 

The source Controller Pen is here:

 

http://codepen.io/davestewart/pen/itCkj?editors=100

 

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

 

Enjoy!

Dave

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

 

http://codepen.io/collection/Bulzw/

 

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

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

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

Love seeing the progress on this.

 

Jonathan, 

 

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.

 

Dave, 

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

 

Best,

 

Carl

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:

 

http://codepen.io/GreenSock/pen/mrzsn

 

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

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...