Page 1 of 1

Updating colours of Lottie animations in a skin

Posted: Wed Feb 21, 2024 6:33 pm
by daveosaurus
Hi all. I'm trying to work out how to change the colour of some Lottie animations in the default material_index skin of Pano2VR 7.

In the screenshot below, you can see I've successfully changed the colour of the rollover icons to blue... all good... but the 'underlying' Lottie animations (elements with the Lottie icon and names ending in "_anim" in this first screenshot) don't have a colour component – if I select the element and click the colour palette icon in the skin editor, I get the error "Your current selection of skin elements has no colorizable properties!"

lottie-colours.png
lottie-colours.png (125.7 KiB) Viewed 898 times


Do I need to find the Lottie animation files that are used by this skin? If so, where are they? I can see e.g. a JSON file called "Menu to close A.json" in the component toolbox (Lottie tab, Materials folder) but I can't do anything with it and can't find it in the filesystem anywhere?

lottie-json.png
lottie-json.png (226.17 KiB) Viewed 898 times

TL/DR: How do I change the colours used in Lottie animations?

Thanks in advance!
David.

Re: Updating colours of Lottie animations in a skin

Posted: Thu Feb 22, 2024 2:15 pm
by Tony
if I select the element and click the colour palette icon in the skin editor, I get the error "Your current selection of skin elements has no colorizable properties!"
Yes, because a lottie file isn't a graphic or HTML element it's a JSON-based animation file format. For example the Arrows A.json file in the Component Toolbox is actually this text file.
lottie.jpg
lottie.jpg (2.42 MiB) Viewed 869 times
can see e.g. a JSON file called "Menu to close A.json" in the component toolbox (Lottie tab, Materials folder) but I can't do anything with it and can't find it in the filesystem anywhere?
To use a Lottie just drag it from the Component Toolbox into the skin canvas. You can find the actual file by right-clicking on the Feather folder in the Component Toolbox and then clicking on the popup "Open Category Folder in Finder"
TL/DR: How do I change the colours used in Lottie animations?
Thats a bit of a longer conversation but it can be done. Here is an example where a single Lottie file is changed, by buttons in the skin from a single color for all elements to one where different elements have a different color: https://p2vr.s3.ap-southeast-2.amazonaw ... index.html

Cheers,

Tony

Re: Updating colours of Lottie animations in a skin

Posted: Fri Feb 23, 2024 2:11 pm
by daveosaurus
Hi Tony, thanks for the response and apologies for delayed reply (I didn't get an email from the forum notifying me of a response, despite seemingly being subscribed to this thread!)...

Thanks for showing me how to get to the file (by right-clicking the FOLDER... I didn't think to try that!).

In terms of editing Lottie animations, I've subsequently found the Lottie online editor on LottieFiles. This link gives more info, for anyone else finding this thread in future: https://photography.tutsplus.com/articl ... -cms-38695

There's also a "Bodymovin" plugin for AfterEffects (https://aescripts.com/bodymovin/) which I might have to start experimenting with that.

Down another rabbit-hole I go!... 😁

Appreciate the reply!
David.

Re: Updating colours of Lottie animations in a skin

Posted: Sat Feb 24, 2024 9:05 am
by Tony
Hi David,

No problem.
In terms of editing Lottie animations, I've subsequently found the Lottie online editor on LottieFiles
This is good if you want to change the colors permanently. The example I posted changes the colors within Pano2VR, so you can have one lottie but present it in different colors based on a Pano2VR variable.
Down another rabbit-hole I go!.
I'm waiting for you at the bottom :-)

Tony