The long-awaited Loopic 2.0 is finally here, packed with a variety of new features, enhancements, and bug fixes. Let's take a closer look at what's new in this latest version.

LiveOS integration​

Loopic 2 introduces seamless integration with LiveOS, a cutting-edge software and IP-based solution for local and remote live media production of news, sports, entertainment, and events. Using Loopic, LiveOS users can now create animated HTML graphic templates within minutes! Learn more about how this integration works in our documentation.

Ellipse element​

Loopic now features support for drawing elliptical shapes, enabling users to easily create ellipses and circles that can also function as masks.

Rulers, guidelines, and improved Snapping​

For pixel-perfect precision, Loopic introduces rulers and draggable guidelines. Enhanced snapping between elements and guidelines ensures perfect alignment.

Cut, copy and paste​

Transfer layers and keyframes between compositions by using the cut, copy and paste functions.

New masking system​

The old masking UI has been completely revamped for a simpler workflow. To apply a mask on a layer, simply select the source and mask layer and click "Use as a mask". The mask will be applied while still behaving like a separate layer.

Drawing with SHIFT and ALT Controls​

Drawing and resizing shapes or performing transformations from an element's center is now easier. Holding down the SHIFT or ALT key:

• Ensures perfect shapes or anchors changes to the element's center.
• When dragging elements, holding SHIFT restricts movement to either the X or Y axis, depending on the larger dimension.

Enhanced Preview popup​

The preview popup has been revamped to be larger and now includes an integrated console, simplifying the process of testing and debugging templates.

Text element improvements​

In the new version, we've enhanced the functionality of "auto-sized" Text elements:

• Now, you can horizontally align them.
• Obtaining their width and height dimensions is now simplified through style properties (no need to use getBoundingClientRect or similar methods anymore).

Additionally, this version introduces the vertical alignment option, providing further flexibility in text element customization.

Other features and enhancements​

Several smaller features have been implemented in this release to further enhance the user experience:

• Support for touchpads
• Export frame as PNG image
• Checkerboard background if the composition's background is transparent
• Catching errors in composition and frame actions
• Double-clicking on nested composition opens it
• Border-radius for all elements
• Support for the webp and jpeg image formats
• Support for CasparCG Invoke
• New Image loader element "cover" size

Bug fixes​

Here is the list of all bug fixes:

• Drawing and resizing elements to negative values
• Disable touchpad left/right browser navigation (swiping with two fingers)
• Disabled page squeeze on scroll up/down
• Disabled default browser's page pinch-zooming
• Crash bug when passing arguments other than type "string" to Text elements setContent method
• Bugs with incomplete data when duplicating compositions
• SVG frozen position at 0, 0
• Glitches while drawing Path elements
• The keyframe button is easier to hit
• Bug when importing supported resources with uppercase extension
• Masks functionality if CEF version < 88

Migration​

All project files created with Loopic version 1 are compatible with Loopic version 2. The Loopic API interface remains unchanged.

If your templates utilize "auto-sized" Text elements, you may encounter an issue where these elements are not visible on the canvas. To resolve this, simply select the affected layer from the Timeline panel and toggle the "Auto-Size" property in the Inspector panel.

For advanced users directly editing DOM content, please note that there have been structural changes to the Text element.

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 new 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.