Advertisement
  1. Web Design
  2. Animation
Webdesign

A First Look at “GSDevTools” by GreenSock

by
Difficulty:IntermediateLength:ShortLanguages:

GreenSock is and has long been one of my favorite libraries on the planet when it comes to SVG and other complex web animations. For this article I’m pleased to present a wonderful addition to the GSAP platform titled “GSDevTools”. This is a collection of tools that will certainly excite many GreenSock users who need an interface to interact with their GreenSock code. Let’s take a deeper look at this wonderful new feature by our friends Jack and Carl at GreenSock.

Getting Visual

For those acquainted with GreenSock you might be familiar with timeline tools currently available to the public by Sara Drasner (GSAP Player) and Chris Gannon (ScrubGSAPTimeline). Both of these options are fantastic, but they have something in common; they only “scrub” a timeline sequence.

GreenSock users have always voiced their desire for an advanced playback controller in order to isolate portions of their animation sequences. Happily, that time has finally arrived with a new GSAP plugin aptly named GSDevTools; a playback controller that allows your sequence to be scrubbed and can also isolate a scene’s playback, plus many other fantastic options we’ll discuss. Let’s dive in and take a look in more detail at all that is GSDevTools.

How GSDevTools Works

Loading a simple JavaScript file containing the plugin code and then calling GSDevTools.create() provides a scrubber with keyboard shortcuts, in and out points, and more. You even have the ability to isolate specific sequences for finer control. It’s amazing to finally have a visual timeline tool for GSAP that possesses a user-friendly UI with a ton of options to help with your animation workflow.

Having a “scrubbable” timeline is an amazing feature for sure, but GSDevTools also provides a select menu to isolate motion sequences; even ones by an ID value. If you were to rewind one animation, for example, everything else around it also rewinds in context. This way you can select that particular element and it’ll play that particular section. 

By default the property globalSync is true and that means it keeps your animations in the context of the global timeline (if you rewind that one animation everything else around it also rewinds in context). It’s a really nice way to refine your animations.

You’ll also notice the “minimal mode” option. Drag your window smaller than 600px to see that the timeline/scrubber holds up perfectly. The logo on the bottom right also links to the docs!

GSDevTools Setup

Before any scenes are registered with the GSDevTools you’ll need to make the call to GSDevTools from your JavaScript file, including the script for the plugin itself.

When it comes to placement of the GSDevTools.create() call, it’s recommended doing so after you create your animation’s code. This allows you to set an inTime / outTime that can be scrubbed using the playback controller. If animations don’t exist prior to the GSDevTools.create() call it would be tough to add your motion sequences to the timeline inspector.

Now that our playback controller has been summoned you can pass through options if you’re so inclined. All parameters are optional and you can just write GSDevTools.create() to use all the defaults provided out of the box.

minimal

Setting this option to true will provide the basic controls, but below 600px it automatically switches to minimal mode regardless.

paused

This option allows the timeline to play automatically or pause on initial page load.

globalSync

Disable this option by passing in false if you define an animation and want to unhook it from the global timeline.

css

Set whatever CSS styling you desire on the outer div of the timeline inspector.

animation

if you define an animation, such as animation: myTimelineanimation: myTween or animation: "id", that animation will be initially selected. By default, the global timeline is selected.

visibility

When set to auto the controls will automatically hide when you roll outside them for roughly 1.3 seconds or more, returning when you position your mouse over the timeline region again.

inTime / outTime

For inTime and outTime you can define the time value in seconds or use a label if the animation is a timeline. If you define an inTime or outTime, it’ll leave those intact even in minimal mode, and will also remember your in/out points if you switch away from an animation and then come back to it from the drop-down menu. They even recognize the IDs of timelines and relative offsets; for example, inTime:"myAnimation-=2" to have it start two seconds before myAnimation, or inTime:"-=5" to watch the last five seconds.

timeScale

You can define a timeScale to speed up or slow down your sequence. This can also be set from the timeline UI manually.

container

If you wish to drop the GSDevTools <div> into a particular container element, selector text or instance, you can do so based on your needs.

loop

This property lets you set the loop manually before page load, but this option can also be set from the inspector UI.

persist

Setting this to false will make GSDevTools turn off persistence between page refreshes.

Keyboard Shortcuts

Hopefully the title of this section says it all; you can use your keyboard to navigate and control the timeline. Here’s a list of what is possible:

  • Spacebar: play/pause
  • Up/Down Arrow: increase/decrease timeScale
  • Left Arrow: rewind
  • Right Arrow: jump to end
  • L: toggle loop
  • I: set the in point to wherever the playhead is
  • O: set the out point to wherever the playhead is
  • H: show/hide (toggle) the whole thing.

Now that we understand keyboard maneuvers it’s time to register a scene.

Registering Scenes

As I explained previously you can isolate specific scenes of your animation sequence for finer control. In order to isolate your animation sequence and display it from within the select menu you’ll need to give your sequence an ID.

Assigning an id to a timeline or tween will cause it to show up in the animation menu, making it easy to isolate that scene; so sweet!

The Timeline Scrubber

You’ll be super excited to see the scrubber feature allows you to manually isolate in and out points as well.

I bet you’re wondering to yourself “where has this been all my life?” This is really the magic that is GSDevTools. You’re not only given the ability to scrub, but define the time stamps of your sequence, slow it down, speed it up or repeat the entire sequence you’ve targeted; manually or by passing options to the GSDevTool.create() call.

Additional Notes

Here are a few more additional bits of information regarding GSDevTools to be mindful of:

  • Setting your in/out points manually will persist upon page refresh. This is very convenient if you’re zooming into a particular portion of your animation, notice a change that you need to make, or simply require a tweak in the code; you don’t have to manually reset those in/out points again. If you define an inTime/outTime from within GSDevTools.create() that will override this mentioned behavior.
  • timeScale and loop state persist on page refresh.
  • Double-clicking on the in or out point markers will reset both (quicker than dragging them both back to the start/end).
  • GSDevTools makes use of Draggable, but since GreenSock didn’t wish to burden users with having to load this plugin separately, they included Draggable into the GSDevTools file itself.

Conclusion

This is certainly one powerful utility making its debut alongside other amazing GSAP extras such as DrawSVG and MorphSVG. If you’re wondering how to obtain your own copy of GSDevTools, it’s part of the membership benefit of Club GreenSock (Shockingly Green or higher) and will also be available, for free, to use on CodePen and JSFiddle. 

Finally, GSDevTools will require GSAP 1.20.3 or later and you can read more about it on GreenSock’s website along with demos available to review on CodePen.  I’d also like to give a very special thanks to Carl and Jack from GreenSock for creating awesome products and always pushing the boundaries. Happy coding!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.