Bodymovin?

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

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… :confused: 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:
champ

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)*.
names

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:
marker_play

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:
client

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 -
playAnimation

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 :heart_eyes:

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 :smiley: 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

I just wanted to “steal” your trick for my upcoming tool, so it need to work for my stuff also, to be able to build it into it. Now testing embedding fonts with the “Glyph” setting…

No need to do anything from your side. Thanks :slight_smile:

1 Like

The loop is works fine both Internal and External. But it is not good if loop duration is longer because the Stop is waiting loop run till the end point to execute. It would be good if you we can make loop in a pre-comp and comp loop start when the animation start.

Can you describe the design of your loop, just so I understand what you want it to do, or post a screen dump? How do you want your loop animation to behave when a stop is called?

The reason for the wait is to avoid jump cuts, so removing that feature will make an animation loop, pre-comp or not, jump to the stop marker from wherever it is in the animation cycle. What I have been doing in some templates is having the loop animation fade out when a stop is called. But that only works with an external loop, and the design of the loop animation allowed it.

But I will update the loop settings as soon as possible, so you can disable the waiting for the loop to end before a stop animation is started…

In a loop pre-comp I made a Logo ratation 360 degree. In the Main Comp I use loop pre-comp combine with other layers element and anitation IN(Intro) by position all layer from off screen Left then all the elements position to the right when Out called (Outro).
Is it possible to call the pre-comp animation when the START is called and stop When the STOP is called?
In this scenario, the pre-comp animation timeline is not depend on MAIN COMP timeline.
Sorry, my English is not good. :smiling_face:

As far as I know, there is not a way to have precomp run on its own; it will follow the main comp timeline. If you have it as an external animation, you can manipulate the div element that contains the loop. So yes, it can be done, but not directly from AE, and there are some design limits.

1 Like

I know nothing about javascript nor HTML CSS. The Bodymovin and your solution made me think about using CasparCG to replace my old current graphic system. But now I’m facing some problems. It is not about the loop, the biggest is not support my language, the combine keys is not show correctly with Bodymovin export. Do you have any idea?