Welcome, Guest

Author Topic: Timeline animations and widgets in coherent editor 1.3  (Read 1769 times)


  • Guest
Timeline animations and widgets in coherent editor 1.3
« on: February 18, 2016, 01:06:25 AM »
Hey guys,

We've just released the latest version of the Coherent Editor - 1.3 and it's packed with many new features and improvements. We decided to write this post to tell you a bit more about some of the most interesting of them - the visual timeline, the widget system and the new asset import option from Adobe Photoshop.

Visual timeline animations

Needless to say animations are essential for any game UI. With the new visual timeline introduced in Coherent Editor 1.3 they can be created and edited faster and easier than ever before. Using the intuitive visual interface you can quickly add amazing animations to your UI without any scripting or external CSS files. Furthermore the animations are based on CSS which have superior performance compared to JavaScript.

To create an animation simply select the element, move the pinhead to the time that you want the animation to start, set the desired property and click on the keframe icon. Then move the pinhead to the time that you would like the animation to end, set the ending value of the property, click the keyframe icon and that's it!

The created animations are standard CSS so you can preview them in Coherent Editor, live in the actual game or even in your own browser. A detailed guide for the visual timeline is available in the online Docs.


Another really useful feature of the Coherent Editor that is new in 1.3 is the new widget system. It provides an easy way to group individual UI elements into reusable prefabs. Using widgets has two main benefits:

All instances of a specific widget share its visual appearance
Multiple team members can work on different parts of the UI at the same time
Sharing visual styles

Editing a widget and saving it makes the changes available to all its instances that are currently in the main scene. This a great way to share the same visual style across multiple UI elements. The widget's instances have not only its default visual appearance but its animations as well so using widgets is a great way to share animations too.

Team collaboration

Using widgets multiple team members can work on different parts of the UI at the same time. Each of the UI developers can create parts of the UI as widgets and then export them. Then the chief UI developer can combine all the widgets in a single UI composition.

More information about the widget system is available in the online Docs.

Import from Adobe Photoshop

Individual standard images can be added by creating new image element from the Create panel. Apart from this option the Coherent Editor has also an unique feature that allow you to import assets from Adobe Photoshop even faster.

This method provides two main benefits:

you can import multiple image assets with one action
you can keep the positioning of UI elements that was set in Adobe Photoshop
To use the method you just need to follow a few basic steps:

Create your UI assets in Adobe Photoshop
Convert them to slices and export them as HTML page
Open the exported HTML page in the Coherent Editor
Again more detailed guide about this feature can be found in the online Docs.

But this is not all - Coherent Editor 1.3 has new rendering backend (that provides up to 2x faster performance), new image files support, localization options as well as many other improvements.

Go ahead and check the latest features of the Coherent Editor 1.3 either in the online preview demo or in your copy of Coherent GT 1.7.
« Last Edit: February 18, 2016, 03:36:49 AM by Hristo »


  • Posts: 1
    • View Profile
Re: Timeline animations and widgets in coherent editor 1.3
« Reply #1 on: March 21, 2016, 06:05:23 PM »
I was trying this out today.  It's definitely useful for making things, but I ran into some gaps in the documentation that I wondered if I could get some help.

Once I've made an animation, How do I run the animations from Javascript? Such as if I made a widget and I wanted that object to play an animation, how what would I need to call?  Can I call it to play anywhere in the animation timeline?

Is there any way of specifying animation labels?  Such as if I wanted to have frames 500 be the start of an 'appear' animation where a box fades in, can I specify that?

Is there overhead to having lots of widgets in order to nest animations?  I'm used to flash and edge's model of nesting MovieClip/Symbol objects and can end up nesting things somewhere up to 5 layers deep.

Are there any interpolation options?  It seems like all interpolation is linear.

Also, do you have a channel for sending bug information about the tool?  I've run into a couple issues I'd like to report.


  • Guest
Re: Timeline animations and widgets in coherent editor 1.3
« Reply #2 on: March 22, 2016, 06:32:12 AM »
Hi Jamie,

You can control the play state of the animation by using the "animationPlayState" property.

Here's a sample JavaScript code to pause the animation

Code: [Select]
document.getElementById("myElement").style.animationPlayState = "paused"; 

or to make it run again

Code: [Select]
document.getElementById("myElement").style.animationPlayState = "running"; 

so you can pause the animation by adding the pause code in the "on scene loaded" event and then set it running when needed with the "running" state. Alternatively you remove or then add css class that has this animation. We have a planned feature in our mid term backlog called "Actions" panel that we'll enable you to do all this visually in the editor.

The animation triggers is also a planned feature in our mid-term roadmap that will enable you to play animations or execute JavaScript code when a specific time in the timeline is reached. Until this feature is available you can achieve this functionality by using the "onanimationend" event. First you can create an empty animation - for example two keyframes with the same value for the property. Then position the second keyframe on the place in the timeline that you would like to have a trigger and register for the "onanimationend" event. In the handler for the event you can execute the code above or any other JavaScript code.

Adding labels is indeed a handy feature and we actually also have it planned in our mid-term roadmap.

Currently nesting widgets within widgets is not supported. However this is a also a planned functionality in our mid-term roadmap. If like like to use nested animations now you can use the hierarchy structure and simply nest elements in each other. Using the hierarchy you can way more than than 5 levels deep structures and still have excellent performance.

Yes, there are animation easing options such as linear, ease-in/out, step-start/end, etc. Most probably you are using an older version of the Editor. I'll send you link on PM with the latest version of the Editor.

To get help faster you can send your questions directly to our support team by sending an e-mail to support@coherent-labs.com