Skip to main content

Loopic 2.0 Release Notes

· 4 min read
Ivan Maretić

Loopic 2.0 Release Notes cover illustration

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.