In the newest version 1.5, we are introducing 3 highly requested features: custom easing functions, border radius, and support for Graphics Data Definition!

Custom easing functions​

Previously, Loopic limited users to selecting from a set of preset animation cubic-bezier easing functions. You could choose a linear animation or opt for predefined easing functions like ease-in, ease-out, and others. However, the latest version of Loopic removes this restriction, allowing you to create and customize any easing function of your preference.

When you select a keyframe, the Keyframe settings panel will appear within the Settings panel. From there, you can either select one of the available presets or define your own easing function using the interactive graph.

To enhance the experience of working with easing functions, you can play your animation in a loop while adjusting the easing function. As you modify the easing function, you'll immediately notice the corresponding updates in the renderer preview, making the process more enjoyable and intuitive.

Border radius​

The Rectangle element now fully supports the border (corner) radius, allowing you to round rectangular shapes. You have the option to apply the same border radius to all corners or choose only specific corners to be rounded. Either way, all border radiuses can be animated.

Graphics Data Definition​

The Graphics Data Definition (referred to as "GDD") is the latest norm for defining dynamic data in graphic templates. GDD represents a specialized collection of JSON-schema definitions tailored exclusively for dynamic TV graphic templates. The latest version of Loopic, version 1.5, incorporates GDD support, meaning that all templates exported from Loopic now include embedded GDD schemas. Currently, Loopic generates GDD fields specifically for Text elements and Image loader elements. Moreover, both of these elements offer customizable properties accessible through the Settings panel.

We are pleased to inform you that Loopic has been upgraded to version 1.4.0!

Here is what's all new in the latest version.

New Actions API & new documentation​

We have redesigned and simplified our HTML templates API which is now called "Actions API". Together with the new API, we have also launched a whole new documentation site (part of which you are reading right now), which contains detailed API descriptions, as well as examples and user guides for new users. This is just the first version, we will always keep the documentation updated and we will keep adding more and more content to it in the future.

Below you can see an example of a color update middleware - notice how much less code is required in the new version.

loopic.useOnUpdate("_color", (key, value, next) => {
  const el = this.findElementByKey("_myShape");
  const rgb = hexToRgb(value); // You had to manually implement this method!
  el.properties.path_fill.value.r = rgb.r;
  el.properties.path_fill.value.g = rgb.g;
  el.properties.path_fill.value.b = rgb.b;
  this.refreshRender();
});

loopic.useOnUpdate("_t1color", (key, value, next) => {
  const element = this.findElementByKey("_homeTeamColor");
  element.style.fill.value = value;
});

New Actions API also re-introduces the "play in reverse" (ex. play backward) functionality as well. Check out the new "Play in reverse on stop" example.

Simplified resources and project importing​

To import resources, you don't need to search for a specific import menu for each type, but you can just select the resource and the correct element type will be automatically created. In addition to that, you can import new resources or load existing Loopic project files just by dragging and dropping them in the Loopic!

UI updates​

As you will notice at first glance, we've redesigned the UI and now Loopic has a "Home" page. It's similar to the old "Welcome" popup - you can create new projects or load existing projects, load demo projects, but also edit account information and access documentation (this list will be very soon extended with the new content).

In addition to the "Home" page, there is now an option to lock the "Fit canvas" which will always keep your entire canvas in the renderer frame.

There are also some other smaller UI changes such as

• Elements that are outside of the visible canvas will now be shaded so it's easier to see if they are outside of the canvas
• Mask controls UI for rectangular masks now allows you to control the exact dimensions of the rectangle

Other updates​

• You can now control rectangle width and height from the Settings panel
• The Loopic version is now included in the project file
• If the element has a key, it will be shown instead of the layer name in the Composition panel

Bug fixes​

The ew version also comes with many bug fixes. Here are the most notable ones:

• Consistent canvas zoom
• Zooming the timeline keeps the playhead in center
• Bug with a nested composition not being computed before playing
• Performance
• Nested comps playback sync bug
• Template preview popup bug

We are happy to share the brand new Loopic documentation site!

On these pages, you will find all information about Loopic. Whether you are looking for concrete examples, or whether you need to check the details of the API, you'll find it all here.

The documentation is divided into three sections:

1. User guides - section is recommended for beginners which explains the basics about the Loopic and how it works
2. Actions API - section recommended for users who want to create more advanced templates
3. Blog - section where we will keep you updated with the latest changes, or other topics you might be interested in

And this is just the beginning - a lot of new cool stuff will be added here soon. We hope that you like it, and as always, feel free to contact us if you have any questions or you need any advice.