Bodymovin?

General
, ,
1

Hi - I´am trying to get a html file, made with bodymovin from AE to work in CasperCG, but the html file crash the channel and dosent seem to work? So how can I get it to work, and is the html file loaded as a template or as a web page?

regards
Heine

2

After a quick Google search it seems that you need to have Lottie installed to play bodymovin. Not sure if caspar can utilize that.
HTML can be played both from from CG commands and the PLAY command.

3

Lottie is the player for stuff exported by Bodymovin, that‘s right. It can be used inside a Caspar template.

4

Thx. - The lottie player works, when i look at the html/animation direct in chrome, but when I try to load it in caspar, it do not load, so do you know anybody how has a working Html template, with at bodymovin/lottie element?

5

Is there a required chrome version? The version in Caspar is quite old.

6

I don’t know, there is probably. Have you tried one of the last Caspar builds? AFAIK the embedded Chrome has been updated.

7

Hi
I’m using lottie and AE to make the animations for the template as well.
Just curios if you have managed to make it work coz I’m currently stuck with making the client send JSON data over to the file and dynamically change the graphics titles.

Cheers

8

We are using a group in the client with 2 html files, the one with the lottie player as background and then a another html file on top with the dynamic text - controlled from at webUI - so kind of not using the client for the dynamic text. But we can´t control the lottie player, the way want it.

9

Hi has anyone succeded on using body movin and updating text with caspar? if yes could you give me some tips please? thanks

10

I’ve got a working solution, with some of the code from this thread: [Lottie/Bodymovin HTML template help needed](Lottie/Bodymovin HTML template help needed

Later today when I get to work, I will collect some example files and post a link.
Heine

1 Like
11

I’ ve made a quick little basic demo lower third - you can download the template and the ae project here:

template and ae project

Here a short and by no means fulfilling how to:
In AE name the dynamic text layers: .f0 .f1 or .name .title or whatever you like, just remember the “.” in front. (it will be a class in the code later)
Then make some cool graphic!

Select the composition in bodymovin extension - in setting - unmark “glyphs”
(you can use glyphs if you want them embeded, but you will have to write all the characters you will need in the text layer, )
and select standard export.

There is a lot of other options, but I have not used them so far.

Render, and bodymovin will ask for a path to the font - I place the font in the same folder as the rest of the template files, so it’s just the name (Roberto-bold.ttf in my example) of the font.

Bodymovin will make a data.json file (or what you call it) and if you have images in your AE timeline it will make a image folder to (look in example)

In the demo lower third template folder you can see the scripts needed for it to work in caspar -
At the top of the index.js you can change in and out frames, and thats the frame number from AE.
you can also change the path and name of the json file from bodymovin.

The lottie.js is the player, and then the wonderful webcg-frameswork.umd.js

Name the keys i CCG client the same way as in the AE Timeline: f0, f1 - but without “.” in front.

And it should work…
Load before play, the first time you use it. Stop will not remove the template, so if you hit play again after stop, it will play again.

If you want bodymovin to resize the dynamic text, pay attention to the size of the text box in AE.

Hope it helped, and if you have any questions let me know.

best regards Heine

5 Likes
12

Thanks alot for this help Heine!
I will start work on it :slight_smile: and surely let you know !

13

I am probably too stupid to figure that out: How do you make the background move in accordance to the size of the text boxes? I was looking for any kind of linking of properties inside the animation, but did not find any…

14

Its me - I wrote it a little bit wrong…
There is no link, the background size/scales is not moving in accordance to size of textbox or length of dynamic text.

The background extends to same position, and the textbox is sized so it fits in that space. So if the dynamic text is longer than that space - lottie resize the text to stay inside. Is the length shorter it will stay the size made in AE.

What I was trying to say, was that If you want that to happen, the resizing of text, you need to make sure the textbox in AE has the size you want… (err… does it make sense?)

Its a feature of lottie - in the index.js there is: animElement.canResizeFont(true);

Hope that helped/clarified it.

16

Ah I see, it just scales the font.

17

I have a question about dynamically changing images in Bodymovin using the Update CG function. I have an embroidered animation from AE, with a few dynamic text boxes and two images that are logos. In JS I set the initial data, they are loaded, the animation is done and when I want to do the Update (I play only the segment) all the text data changes only the logos change once and not more.

I use the following code inside Update function:

if (g_animation.currentFrame !== 0 && g_animation.isPaused) {

  var logoA1 = (data.logotimaa ? data.logotimaa.text || data.logotimaa : '');
  var logoB1 = (data.logotimab ? data.logotimab.text || data.logotimab : '');

  const imageElements = container.getElementsByTagName("image");
  for (let i = 0; i < imageElements.length; i++) {
    const element = imageElements[i];
    if (~element.getAttribute("href").search("images/img_0.png")) {
      element.setAttribute("href", logoA1);
    }
    if (~element.getAttribute("href").search("images/img_1.png")) {
      element.setAttribute("href", logoB1);
    }
  } 

  g_animation.playSegments([animSettings.update.in, animSettings.update.out], true);

};

So I want this to change every time I change the logo (add some other file path) and call Update.

Is it because I only play the segment? Or do I have to reload the entire animation? in AE these two logos are on 0 frame and last all 37 frames.

18

Huh? There is no HTML tag called image, it’s img and it uses a src attribute and not href.

19

…but it is SVG :slight_smile: :grin:

1 Like
20

Can you explain me what is difference ?

21

You can use Google or read the Wikipedia article.