Jep, that’s the case and I can’t get behind the issue. In these two templates there aren’t any other variables.
Thank you! <3
Ok, the index.js is updated and hopefully fixed, you can get it here
In short I added a promise, waiting for the animation data to be loaded before trying to update & play it, and I removed the “replace image part”.
I should have seen this problem in the first place.
THANK YOU SO MUCH. It’s working 
1 Like
is it possible, to get the “load image” part back. In need it for this template. In this case, the code is not yet updates since your last change because i cant get behind it 
Regards,
Fred
Here is a updated version with images that works.(at my setup)
It´s not the best solution, because you have to write the paths of the images to be replaced manually in the index.js
I have another version, where you don´t have to write the paths, only the in & outs frames etc. but its not done and tested yet, but I will share it here when its done.
regards
Yes, sadly I need to change the “splash_art” and the “champ_icon” as a variable in caspar. So i think your fix does not work for me.
I´m sorry I explained it in a bad way - You can change the images splash_art & champ_icon, just write the path to the new images you want in the client.
What I meant was the images path to be replaced will have to be typed manually(images/img_0.jpg and images/img_4.jpg), so if you have another template with images to be replaced, you will have to change a few lines to use the same index.js.
regards
well well well… 
It’s me again. I cant get it up and running.
Could you upload me the whole working template. You said it works for you?
Thanks <3
Yes, I’ve made some adjustments - so here is the full template FF_CHAMP_STATS
In the images folder I added 2 images, that I used as test:
Let me know if it works as expected.
regards
1 Like
Did you tweak the data.json? Your version works, but if i want to edit the animation via bodymovin it doesn’t.
regards
What part is not working and what kind of changes did you make? I did’nt change the data.json- Make sure to run the the lastest version of bodymovin - (I think the latest is version 5.9.6)
If you send me the new data.json, I will try and run it.
Hopefully later today I will have at updated template(the lower third posted earlier in this thread) with a new index.js, where you dont have to type anything in the js files, and in & outs are defined in the AE project with markers.
New lowerthird template example:
Get it here
Whats new?
Reliabilty…(I hope)
Dynamic images(or the paths for them) do not have to be found and typed in the index.js
In and Outs of the animation are set in the AE timeline with markers.
First of all, it´s a simple template, just to show how I do it, and a way to learn for me, so comments, improvements and Titan RTX’s (get my adress in a pm) are more then welcome. And make sure you have the most updated bodymovin plugin and lottie.js
Dynamic images are named the same way as dynamic text, whatever with a dot in front.
Totally random I named this “.image” and you can have more then one.
Only con is that you cant have a image visible at first frame, then you will get a short glimps of the original image, so if you want the animation to cut on, let the image start at frame 1(AE timeline)*.
Next is the in and outs, they are defined with markers. Set a marker, at the start frame, enter a duration and give it a name:
This template has “play”,“stop” and “update” that follows CasparCG commands, and one custom called “total” - I will come back to that one. Also as I marked in red, make the out maker 1 more frame the stop frame of a given animation.
Export it with the bodymovin plugin,(as in the original post)
And then its buisness as usual:
In this example there is 2 images img_0 and img_1 you can switch between, placed int the images folder.
There is a function called “playAnimation” you can use to activate custom animations via INVOKE -
And in this template I made a “total” animation for testing, I put a marker in timeline from frame 0 with a duration of 66 and called it total - But that could of course be anything, and as many as you like.
update>> About fonts - The first example I posted, I wrote the paths in the plugin export from AE and that worked, but not the way I thought. It did not use the path, but the system fonts, and only the first font used - so to add fonts read this
*there is a way to replace images at frame 1(0 AE), but that would complicate the index.js and I wanted it to be simple is the example.
Looking forward to feedback(and Titan RTX´s)
regards
Heine
2 Likes
Make sure to run the the lastest version of bodymovin - (I think the latest is version 5.9.6)
Totally forgot about that one. Sadly, my tests have to wait after the weekend, but I will reach out to you.
Awesome new features in your latest post. Thanks for that either. I am looking forward to try these as well
EDIT:
Only con is that you cant have a image visible at first frame, then you will get a short glimps of the original image, so if you want the animation to cut on, let the image start at frame 1(AE timeline)*.
THATS THE PROBLEM I GUESS 
I should have read first…
Update - Fonts & paths
I have updated the template, so now it will add font paths when loaded.
In order to make it work, you will have to do 2 things when the dialog about fonts pops up in the end of the export in bodymovin.
Rename the “Font Famliy”, so it is the same as the name in the red dotted box, and then write the path in the “Font Path”
For each font used, with a path typed in in the export, the template adds a “@font-face” to the style with the font-family and the path.
It’s possible to change the path without re-exporting from After Effects. In the json file bodymovin exports, there is a font section:
"fonts": {
"list": [{
"origin": 0,
"fPath": "./fonts/Roboto-Bold.ttf",
"fClass": "",
"fFamily": "Roboto-Bold",
"fWeight": "",
"fStyle": "Regular",
"fName": "Roboto-Bold",
"ascent": 75
}]
},
Change the path, and that will be the new path on next load.
Let me know if don’t work as expected!
And here are the AE files for the template example
2 Likes
It is a great update. thank you for sharing.
BTW the do have any idea to play loop a pre-comp?
ex: I want to add looping flare animation on your lowerthird example template.
Yes, I know of 2 ways to add a loop.
You can export the loop animation as a seperate animation and load it, or make the loop animation a part of the main timeline, and set at marker named fx. ‘loop’ with the duration of the loopand then handle that animation.
Which solution is best depends on how long the loop animation is, and the how it designed, and how you want it to act when you call stop or if you have a update animation.
fx. If stop or update(not the initiale update on first load) is called in the middle of a loop animation, should the loop finish before the stop or other animation executes?.
I will try and make a example for both solution and uploaded it.
The timeline based will finish the loop animation, before other things are executed, and there will be a option to add a delay for the loop, and if there is no update animation defined it will update during the loop.
The sepearet files solution, the loop will start after play, and run until stop is called.
1 Like
Thank you. Waiting to see you solution. BtW, I think that the separate animation file the animation can not be synced.
Okay, so in this github repo, there are 2 quick solutions. Internal/External loop. There is also a readme (work in progress), some of which you already know from this thread.
I tried to make a template example, where parameters only needs to be set in After Effects, and then exported out in a template folder. It’s just a starting point, but as mentioned, the solution depends on the design. So this template may not suit all needs. Its easy to change its behavior, and add new options. Maybe a small script in AE, could help the process of setting markers, etc. At some point, the template code could also use some refactoring, but time flies…
I have only done limited testing, so I´m looking forward to hearing about how it behaves with different animations.
2 Likes
While I could play your template on a machine, that did not had a Roboto font installed and it looked correctly, I was not able to reproduce the trick in pne of my own templates with another font. It always gave me Uncaught TypeError: Cannot read property 'updateDocumentData' of undefined. When I set the line "fPath": "" it played it, but without showing the correct font, of course.
hmm - would it be possible for you to test it with the template from github
It’s updated a bit, and also works without a loop marker, so just replace the data,json and add fonts.
I just tested it with a new export from bodymovin, on a machine that did not have the font (a free otf), and it worked, but I will make some more tests tomorrow.
And thanks for testing it!
1 Like