UI Animations framework for Coherent UI (Part 2)

by Alexandra August. 27, 14 7 Comments

Part 1 is available here

The first step will be the creation of a JavaScript-based animation framework based on the GSAP library.

The framework will make it easy to define element animations, effects, easings, timing etc. We chose a JS-based design instead of a CSS3-based, because JS allows easier control on what is going on. There is also a draft for standardizing such animations – http://dev.w3.org/fxtf/web-animations/.

Before choosing GSAP we experimented with 4 JS libraries: web-animations, web-animations-next, GSAP, jQuery. All libraries have roughly the same features. We compared mostly the performance and stability of the libraries.

The experiments were both artificial and ‘real’ by using an actual game HUD kindly provided by one of our clients. Web-animations and web-animations-next are libraries by Google that try to emulate the new Web Animations standard. The original one proved to work correctly but had relatively low performance. The “next” version was much faster but is still in active development and somewhat unstable. Both libraries severely lack documentation, which we suppose should be the standard itself. jQuery has the advantage of being one of the most widely-spread libraries but proved to be the slowest by far.

GSAP claims to be the fastest JS animation library and from our experiments we can, confirm that – at least compared to the other 3 libraries. It is also very well documented and has all animation features imaginable.

The framework will provide a declarative syntax for animations and easy ways to control them. Standard actions like play, stop, rewind, do-something-after etc. will be supported. All developers using Coherent UI in UE4, Unity or proprietary engines will be able to use the framework in their projects. We will distribute it for free in the Coherent UI package.

UI ANIMATIONS IN UE4 WITH COHERENT UI

We understand that most designers in UE4 work with Blueprints so we plan a tight integration with them. All animations will be controllable through BP and will be integrated with the UI scripting. As a first development tier, we’ll expose all the animation controls and ways to define them to BP. Developers at that point will be able to create animations, apply them to elements, control them and execute BP logic on animation events.

After the initial integration we’ll go even further with possibly a timeline exposed directly in UE4. The difficulties there lie in the fact that the animation framework will be much more powerful and feature-rich than Slate. Covering all cases will be more complex.

Another idea is to try a deeper integration with some external tool – possibly Edge Animate. As Coherent UI is as powerful as a web browser, we could also create a tool completely inside it with JavaScript that runs inside/outside UE4.

We want to create a workflow that is powerful, yet easy to use without the need of special tools outside the Coherent UI and UE4 ecosystem.

We are looking for feedback from our community to develop the best way to do this. Please give us your ideas and what you believe would be most convenient for your game.

Proceed to Part 3

Social Shares

7 Comments

Leave Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

  • is the GSAP distribution worked out with Greensock? if not it\’s a pretty clear violation of their terms..

    Reply
    • George Petrov

      bzor, we appreciate your concern. The idea behind these postings was to describe our thoughts and get ideas about a framework to help users of Coherent UI implement their UIs easier. As you can see from the posting itself the intention was for this framework to be distributed as open source and for free when completed, compliant with GSAP licensing.
      The posting is already rather old, our products have evolved and this framework turned out no longer needed. So we have never completed it and GSAP didn\’t become a part of Coherent products. We are now recommending a different approach of making efficient UI animations, based on CSS. If you are interested in the code related to those postings, please feel free to email info@coherent-labs.com and we will be happy to provide it to you. We may post it on github if more people see value or show interest in it, we didn\’t want to litter the internet with the next piece of non-maintained code.

  • ok that makes sense.. I was evaluating Coherent for a UE4 project when I saw this post, using GSAP for UI would have accelerated our dev times here as we\’re all very familiar with it (not so much with CSS animations). No need to post the code, thanks tho

    Reply