airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.36k stars 2.87k forks source link

'SVG' vs 'HTML' #316

Closed SJMcGee86 closed 7 years ago

SJMcGee86 commented 7 years ago

So a few things that I was hoping you may be able to help with. I've copied the project below and incl the demo.html.

Lower Third Test.zip

So.

We had an issue of getting a background image to work. I was baffled as to why. We've made a simple lowerthird and using CasparCG we manage to implement this and get it to dynamic work using the CCG client. Woohoo. Then I added an image and it fell on its arse. Then I added our logo, added a tint and alpha matte, again none of these things worked.

In the demo above, the after effects project contains an image as a background, but the demo file doesn't have this included.

So we've tried working backwards with other projects that people have uploaded to work out what we were doing wrong. I found out that it didn't like the fact I changed the .json to .js for the background image and the renderer 'svg' to 'html'.

If we set the renderer to 'svg', it includes all the effects I've used (tint, alpha matte etc), but if I change it to 'html' none of them work, it'll still fire but not with the effects.

The problem is that when it's set to 'html' it works fine in the CasparCG client if you trigger play, stop, update, but none of the effects work. If you set it to 'svg' it will only work with autoplay and loop set to true, you can't use the triggers, but the effects work fine.

Any ideas would be greatly appreciated.

bodymovin commented 7 years ago

The svg renderer should be able to support the controls like the html. The control layer is on top of any of the renderers. Effects are indeed only supported by the svg renderer. Regarding the missing BG, it's probably related to the path of the BG file. When you use the js it might not be ablo to find it in the correct location. You need to set the image path manually by passing an "assetsPath" on the animation params.