Friday, May 18, 2018

EB GUIDE – The Animation Editor

Sabrina Kerzel

Sabrina Kerzel is one of our UI/UX experts.

We’ve included a host of new features and updates to this version of EB GUIDE, one of which is the new Animation Editor. If you’re wondering what the Animation Editor does and how it’s different from the previous animation feature, then read on.

The previous version

Before we began reworking the EB GUIDE animation concept, we ran a usability test with a group of users to assess how they used animation in their daily projects and compiled our learnings.
With the previous animation feature, the animation widget and all available animation curve widgets were located in the Toolbox. Your toolbox view looked much like the image below – with a long list of animation items.

To create a widget animation, you had to add an animation widget to your view. This enabled the addition of animation curve widgets as children of the animation widget to create a widget animation. As a single animation is likely to contain more than one animation curve, this added more items to the navigation tree, making it difficult to navigate.

To add to it, you still weren’t at the stage where you could animate any widget property. You first had to link the animation curves target property to a widget property to enable animation.

After you linked the target property to a widget property, the status button would change color. As one of the participating members of our usability test said ‘’It is really hard to quickly recognize which property is animated.’’ In order to identify which widget property you were animating, you needed to hover over the status button and a tooltip would provide the necessary information.

Another participating member pointed out “If you’re not familiar with a model, you have to check the target property of every curve to identify what an animation actually does. This is really time consuming!”

This meant that every time you wanted to check what an animation curve was animating, you had to go to the properties panel of a specific curve and hover over the status button next to the target property to see, which widget property was animated. It also meant that the user didn’t have a clear overview of what had been animated.

Based on the feedback we had gathered in our usability test, the EB GUIDE usability team created a new animation concept. This was tested, again, to ensure it was an easy and intuitive way to create a widget animation.

New and improved

Based on the results of our usability tests, we removed the animation curves in the toolbox – this now means users have a clear, well defined and crisp navigation tree. What remains is the animation-related widget ‘Animation’, which is now located in the Basic widgets category.

This still leaves the question ‘How do I animate my stuff?’ unanswered. Introducing the new Animation Editor! Now when you add an animation widget to your view, the Animation Editor opens automatically.

The Animation Editor is part of the editor component and is located at the bottom of the component.

To animate widget properties, simply click on the + button to add an animation property and this opens an overlay.

You can now select the widget property that needs to be animated and, in the same step, the curve that defines the animation curve type the widget property should animate. The usability test we conducted to assess the new feature revealed the following feedback “Adding animated properties is very easy and clear for me”.

Graphical representation of animation curves

All added animation properties of one animation are displayed in the animation’s Animation Editor. As one participating user pointed out ‘’to see the animation in the editor area is pretty awesome.’’ Animation curves that animate the same widget property are listed below the respective widget property. It is possible to add curves directly to the same widget property by using the plus-icon button or to change the animated widget property using the pen-icon button. When this was tested, another user said “Adding curves is fast and easy – it looks good!”

To adjust animation curves, simply edit them in the properties panel – this still remains and hasn’t been changed.

What we have modified, however, is that we’ve enabled a graphical technique to adjust delay and duration.

Yet another piece of user feedback that we had received was the lack of the ability to resize, drag and move curves. With the new Animation editor, this is easily achieved. Simply hover over one side of the animation curve, use the appearing grabber and directly resize the curve in the Animation Editor. This updates the duration property in real time! It is also possible to drag and move the animation curve to change the delay property.



If you’re already working with EB GUIDE 6.5 and your model contains animations, migration is not an issue that you need to worry about. All we’ve done is change the UI workflow – everything else under the hood remains the same. This means you don’t need to migrate any of your animation-related models or projects!


Start modeling now!

As always, the following resources have been updated and are now available:

Download the Community edition of EB GUIDE and subscribe to our alerts to stay up to date and informed.

Read through our updated Release Notes

Download updated user documentation.

Access updated tutorials here.

Download updated feature demo, SDK examples and custom widgets.

Sign up for one of our EB GUIDE trainings now.