search

airbnb / lottie-web

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

Feature request: blend modes #1875

Open foguetes opened 4 years ago

foguetes commented 4 years ago

I did an experimentation with blend modes in Lottie

It seems multiplying works fine when there are elements in the background of the lottie animation https://lottiefiles.com/share/4RX8Gt

but when I hide those elements and place a background image via html it doesn't work https://codepen.io/foguetes/pen/VwwRLBv

I would be great if the animation could interact with the background without any modification

bodymovin commented 4 years ago

I think that is not feasible beyond the lottie library. Have you found any examples where svg content can be blended with backgrounds?

foguetes commented 4 years ago

Yes. https://codepen.io/foguetes/pen/eYYXMap

It is using CSS.

I looked in the Lottie Wiki and I couldn't find any examples on how to use CSS with Lottie files.

Actually, I think I will change this feature request to: please, improve documentation.

bodymovin commented 4 years ago

I see what is happening. If you remove the transform property of the svg it will work. You can do so in multiple ways. One is by passing a property className to the render options with a class and overriding the transform value.

foguetes commented 4 years ago

ok. could you still improve the documentation though? Lottie is one of the greatest tools with one of the worst Wikis. My guess is if the documentation was thorough you would spend a lot less time replying to issues on Github.

bodymovin commented 4 years ago

I agree that documentation needs a lot of improvement. But how and where do you think this information should be added?

foguetes commented 4 years ago

If I visit the official Lottie airbnb page I get a 404 which doesn't really look good on them. I'm not a big fan of the Github wiki as well. A Lottie MediaWiki would be ideal, I believe, since it's easy to browse categories and hyperlinking articles.

kudanai commented 1 year ago

Hello,

looks like this issue has become stale now. Since then there have been a few external and community driven documentation projects. For example:

Hopefully these address the issues somewhat better