Lottie/Bodymovin HTML template help needed

graphics
html
template
server
development

#1

Very new to coding and just started out designing an HTML template.
Used Lottie/Bodymovin as base/animation and managed to get working in casparcg with dynamic text fields
(only works if i manually change the values within the HTML file.)

I’m currently having difficulty getting inputs from the client.
Is there any way i could tell casparcg to input the json data into the HTML/JS and somehow parse the string and change the variable so it can work as a dynamic graphics?

Help would be much appreciated.

Server version 2.1.0.3437


#3

Should have worded it a little better.
What I’m trying to do is use the function update() ,parse the string then assign each value to individual global variables.

I’ve been trying to do this

var text1 = "hello"
var text2 = "world"

demo_data.layers[2].t.d.k[0].s.t = text1;
demo_data.layers[4].t.d.k[0].s.t = text2;

and the graphics showed up perfectly, but i wanted a dynamic graphics, so added the following function.

var json1
var json2

function update(str) {
        var json = JSON.parse(str);
        json1 = json.f0
        json2 = json.f1
    }

demo_data.layers[2].t.d.k[0].s.t = json1;
demo_data.layers[4].t.d.k[0].s.t = json2;

There are no errors that i can see from the server log but the graphics won’t show up.
Thanks


#4

I think I kinda see your problem, but I’d recommend you this:

  1. Take a look ar @indr’s HTML producer tutorial, which is quite helpful an thorough. It might seem a bit slow for a seasoned web developer, but introduces a couple of concepts around the functions CasparCG invokes while displaying a template.

  2. Definitely check WebCG Framework, also by @indr. I’ve done plenty of templates with it and frankly simplifies a lot of the code behind the scenes, so you can focus on setting the texts in the right places. Also, it integrates a development mode where you can test everything right in the browser.

  3. This is a really simple template that I’ve done for one of our shows. It implements play(), stop(), update() and uses WebCG Framework. I hope it can help a bit.


#5

You can use JQuery to change things dynamically.

You have a lot of “g” tags an generally you have “tspan” on the text. Just change choose the “g” tag number and and change the text of the “tspan”. You can change all things in the animation of the SVG… it’s very cool.

The only thing is the first time you play the template is not smut, after that is perfect!


#6

I’d also recommend using WebCG, makes handling commands and data nice and easy.

Lottie player has a function that can change/update text (updateDocumentData) but it only works when the animation is running.
If you want to update the text when nothing is happening, I’d recommend having a few frames where nothing happens so you can play this and the text will update.
There are also a few other options in updateDocumentData you can configure such as font size, colour, justify…

I use classes to target elements rather than id’s. To set a class name in After Effects, go to the text layer, right click and select rename. for a class rename it to .f0 or if you want to use an id name it #f0.

This is a stripped-down version how I implement lottie animations in templates, hope it helps.

// Define animation setting. These are in and out points for the different sections of the animation using frame numbers.
const animSettings = {
  "play": {
    "in": 1,
    "out": 26
  },
  "update": {
    "in": 27,
    "out": 29
  },
  "stop": {
    "in": 36,
    "out": 61
  }
}

// Init lottie
const animData = require('./json/animation.json');
const animContainer = document.getElementById('lottie-container');
const anim = lottie.loadAnimation({
  container: animContainer, // The dom element that will contain the animation
  renderer: 'svg',
  loop: false,
  autoplay: false,
  animationData: animData // Path to the animation json
});

// Handle update/data using WebCG
webcg.on('data', function(data) {
  // only play the update animation if we have already started the animation
  if (anim.currentFrame !== 0 && anim.isPaused) {
    anim.playSegments([animSettings.update.in, animSettings.update.out], true);
  }

  // Update animation text
  const animElementsLength = anim.renderer.elements.length;
  for (let i = 0; i < animElementsLength; i++) {
    const animElement = anim.renderer.elements[i];
    // Check the animation element has a class name and that the WebCG data has a key with the same class name
    if (
      animElement.hasOwnProperty('data') && animElement.data.hasOwnProperty('cl') &&
      data && data.hasOwnProperty(animElement.data.cl)
    ) {
      const cl = animElement.data.cl;
      try {
        animElement.canResizeFont(true); // Let lottie resize text to fit the text box
        animElement.updateDocumentData({ t: data[cl] ? data[cl].text || data[cl] : ''}, 0); // Update the text
      } catch (err) {}
    }
  }
});

webcg.on('play', function() {
  anim.playSegments([animSettings.play.in, animSettings.play.out], true);
});

webcg.on('stop', function() {
  anim.playSegments([animSettings.stop.in, animSettings.stop.out], true);
});



#7

We use this in production just with Jquery.

The ScoreBug is updated in real time, even the score and time. you can change all before animation or change colors, sizes, etc in real time or before animation.

You even can hide parts and fade/cut it when you want. You can test in chrome before to see what are the parts you need to change, if you have a text and export it with the ID “text” you can use:

$("#text tspan").html(“Example”);