How to use external images?

[amorino]

Hello,

This plugin is awesome! I just have a question: is it possible to use external images that exist on other site?

Thanks for the help.

[bodymovin]

what do you mean? exporting placeholders from AE and replacing them with different images when rendering?

[amorino]

Yes, exactly that!

[bodymovin]

when you do bodymovin.loadAnimation you can add a param "assetsPath" to pass the path where the files should be looked for

[amorino]

OK.

But there's any way that I can change the name of the image that bodymovin uses dynamically?

Even if I specify the assetsPath, bodymovin will look for an image with the same name.

Sorry for the trouble.

[bodymovin]

Not yet, but you can do it manually editing the json file or with some simple script.
They are on an array called assets.
Allowing to have images with different names is on my pipeline.

[xinsight]

Relate question: Is it also in the pipeline that images can be given names based on the layer name in AE instead of the generic name? (img_0.png, img_1.png, etc.) This would make it easier for several animations that use images to co-exist.

[bodymovin]

yes, but they will have the source name, not the layer name.
Because a single image can be used multiple times across a single project with different layer names.

[jvke]

@bodymovin is it possible to use Bodymovin to render an AE animation and then impose a dynamic image at run-time? Similar to http://www.jibjab.com/ecards

[bodymovin]

@jvke yes, you can edit the json data and provide any path to new images.

[jvke]

Excellent, thank you very much for an awesome program :-) @bodymovin

[bodymovin]

you can set to use original image names, now. Hopefully this solves this issue.

[zhengs]

Is there a way to use an image that is dynamically transformed by the CSS in the same HTML page (say, change the hue/saturation of the image)? If so, how should I set the path in the json data. Note in this case, the transformed image would be sitting somewhere in the browser's memory, rather than on the physical hard disk.

Thanks!

[LiShunping]

@bodymovin ,how to use cdn image in data.json?
for example:
"assets": [{ "id": "image_0", "w": 415, "h": 148, "u": "images/", "p": "img_0.png" }, { "id": "image_3", "w": 840, "h": 840, "u": "", "p": "http://img.diudou.com/file/test.jpg" }

[bodymovin]

@LiShunping If you want to pass a different base url, you can pass a parameter when calling loadAnimation: "assetsPath"
https://github.com/airbnb/lottie-web/wiki/loadAnimation-options#assetspath

[LiShunping]

@bodymovin thank you. I want to config some images from cdn，but others from local path.
Now it is works by element.setAttribute:

const imageElements = container.getElementsByTagName('image')
for (let i = 0; i < imageElements.length; i++) {
  const element = imageElements[i]
  if (~element.getAttribute('href').search('img_3')) {
    element.setAttribute('href', 'http://img.diudou.com/file/test.jpg')
  }
}

./img_3.png is default from local assets

[AnuMartin1]

Step 1 : right click on layer (vector file)
Step 2 : select Create shapes from vector layer

After effects will create a new shape layer from the vector layer, and hide original vector layer.
Now your composition ready to render :)

Note : Your composition background color will be reused in new shapes background by bodymovin, check your background color.

[rodbs]

Relate question: Is it also in the pipeline that images can be given names based on the layer name in AE instead of the generic name? (img_0.png, img_1.png, etc.) This would make it easier for several animations that use images to co-exist.

@bodymovin Is this feature already implemented? Is it possible for bodymovin not to rename the exported files but use the source file names? How?

Another related issue. In my case I'm exporting audio files and they're renamed but I'm also noticing the sound quality is reduced (the original ones are standard mp3 files). Is it possible? does bodymovin compress/reduce sound quality ?

[bodymovin]

@rodbs respecting the original asset name will be fixed on the next deploy. Regarding audio quality, audios are reexported indeed, but you can select the quality on the Audio dropdown of bodymovin's config.

[martinstender]

Is there any new developement to the lottie-player regarding providing an 'assetsPath' and fetch the image(s) from that source, instead of embedding them in the .lottie-file?

We use it like this:

<script>
        require(['/static/js/dotlottie-player.js'], () => {
            const outerElement = document.querySelector('div.vectoranimation-container');
            const lottiePlayerElement = document.createElement('dotlottie-player');
            const lottieUrl = new URL('/incoming/static/9653890-cykelkort_u_img2.lottie');
            lottiePlayerElement.src = lottieUrl.pathname;
            lottiePlayerElement.mode = 'normal';
            lottiePlayerElement.id = 'vectoranimation-297240017-player';

            lottiePlayerElement.addEventListener('ready', () => {
              const lottiePlayer = lottiePlayerElement._lottie;
              lottiePlayer.wrapper.querySelector('svg').setAttribute('preserveAspectRatio','xMidYMid slice');
              lottiePlayer.setSpeed(1.0);
              lottiePlayer.play();
             });
            
            outerElement.appendChild(lottiePlayerElement);
        }); 
 </script>

There are other ways, I know, but is it at all possible? It works fine with the Bodymovin player like this:

const player = bodymovin.loadAnimation({
            container: container,
            autoplay: !false && !false,
            renderer: 'svg',
            assetsPath: '/incoming/static/', etc. etc.

Any suggestions?

TIA :-)