Lottie-web: problems with responsive

[bruroar]

First of all, great plugin. It blew my mind that I could do these animations in SVG.

Second: I'm having some trouble with responsive, and I don't know if the images generated by the plugin are compatible with responsive frameworks at all or I'll need to use media queries.

This is the example I've put together: http://kakumagame.com/test1902/

As you can see, it's adopting a fixed height, while the ratio of the image stays the same, which creates some blank spaces on top of and under it.

As a disclaimer, I just started a HTML unit a couple months ago, so there may be rocky mistakes in the code, but I've checked with senior developers of my environment and neither of them was familiar with how CSS 3D matrix work, so they didn't know if there was a kick fix around it or not.

I seriously hope there is, again, thanks for your plugin! :)

[bodymovin]

hi.
Are you using the html renderer instead of the svg one for some reason?
If you try the svg renderer you can play around with the preserveAspectRatio attribute of the svg to make your animation fill the empty space.

[killaboss1234]

How do you even export as svg?

[killaboss1234]

Also the code that this produces is super messy

[bodymovin]

hi!
the extension exports a json file that can be rendered as svg, html or canvas on the browser with the player .js
what part do you say is messy?

[killaboss1234]

Hey how do I get the player? Whats messy is the .json and data.js files it produces from after effects.

[bodymovin]

it's minified
and the json is reduced as much as possible because of filesize
you can get the player on the AE extension where it says "Get Player"

[Emasoft]

@bruroar border-image CAN be applied to SVG. If you need an example, here is a codepen of mine with a Responsive SVG 9-slice border:
http://codepen.io/Emasoft/pen/PNvbpa

[bruroar]

Hi @Emasoft, @bodymovin.

First of all, thanks for your responses. Second, they don't quite make sense to me at the moment as I have a very limited knowledge of HTML and CSS, so that's completely my fault.

I did some changes to the example and now it's not being displayed properly, but I was wondering: any of you would be interested in helping me go through the issue? I'd pay your hourly rate, and we could get to an agreement, hopefully it wouldn't take longer than a couple hours.

What I need to know is how the code would be for it to be responsive, or what steps should I follow. I can share the files and fix the page in advance so you can have an idea of the final result, and we could work it out either through skype or any other method.

Kinda a newbie to github as well, so if my offer is somehow outside the rules or improper in some way, just let me know.

Thanks!

[bodymovin]

@bruroar Hi!
Depending on the animation, it might be pretty easy to solve.
If you want, send me the .ae project and let me know how you would like it to display on different sizes.
Don't worry about paying, I'll take a look and help you out.

[bruroar]

Thanks Hernan!

I'm at the library right now but I'll send you an email with the brief asap.
And seriously, thanks a lot, I really appreciate your help :)
Thanks!

[killaboss1234]

how do I download this https://github.com/bodymovin/bodymovin/tree/master/player

[killaboss1234]

and will it help me get rid of all the lines of code and make it look like your example on the website?

[bodymovin]

@killaboss1234 you can download the whole project as a zip file from github with the download button on the right.
or you can get the player on the extension in AE itself.
regarding the lines of code, I'm not sure what you mean.
The player is minified and you can load it externally.
The instance of the animation can be created with those simple lines of code.

[bruroar]

Hi Hernan, sorry, a change in the CSS had broken the page and I was trying to fix it so you could see the result before sending you an email.

I just sent you an email, I hope it's something easy to fix and you could help me.

Again, thanks a lot for your help, I really appreciate it :+1:

[killaboss1234]

can you email me a video or link on how to download and access the player?

I'm trying to get the smallest file size possible. I made a simple animation with a rotating image and the file is massive.

My goal is to get this down to 30KB file.

[killaboss1234]

thanks again for your help

[bodymovin]

@killaboss1234 The file is large because it includes the player. For doing only a rotation, it doesn't make sense to use the plugin because there is a lot of overhead for the player itself.
If you need it reduced under 30kb I could make a version of it with only the svg renderer and no expression support.
Nevertheless, you should gzip your files when uploading it to your server, it will reduce filesize considerably.

[peterlunglum]

Great work on the plugin! I've been using it as well and have been having trouble outputting json files that produce full width, full height responsive SVG. It's always cropping to the aspect ratio of the after effects file, which I made as a 1920x1080. I would like to be able to figure out the best way to set up any file to make a full screen background from the outputted SVG. Is this possible to do in after effects or is this the script API itself that can handle this?

I've attached a file I'm playing with.
Test.zip

[bodymovin]

@peterlunglum hi, have you tried changing the preserveAspectRatio in the renderer settings?

[peterlunglum]

@bodymovin,

I added " preserveAspectRatio: xMaxYmax Slice " to the renderer settings, but get an unexpected identifier error.

Here's the full code for context:

var anim; var elem = document.getElementById('bodymovin') var animData = { container: elem, renderer: 'svg', loop: true, autoplay: true, rendererSettings: { progressiveLoad:false, preserveAspectRatio: xMaxYMax slice }, path: 'data4.json' }; anim = bodymovin.loadAnimation(animData);

[bodymovin]

@peterlunglum you should put the value between quotes:
preserveAspectRatio: 'xMaxYMax slice'

[peterlunglum]

@bodymovin Ah yes, this worked! Thanks for the help and great work on this so far!

[pratheepchelladurai]

The animation I did includes some layer animations and text animation. I have included text animation from external plugin which includes some math script. The rendered version when viewed in browser got stopped unexpectedly when the text animation starts. Anyways to fix it?

This is the math script generated by the external plugin for the Expression Selector:

delay = .1;
myDelay = delaytextIndex;
t = (time - inPoint) - myDelay;
if(t >= 0){
freq = 3;
amplitude = 250;
decay = 8.0;
s = amplitudeMath.cos(freqt2Math.PI)/Math.exp(decayt);
[s,s];
}else{
value
}

[bodymovin]

@pratheepchelladurai Hi, can you share the .aep?

[XBLDev]

I can't get this working with react-bodymovin: https://github.com/QubitProducts/react-bodymovin

Maybe I'm just misunderstanding something but it seems that I can't fit an animation into a pair of

, doesn't matter how I setup the css for div or what settings I give the bodymovin elements.

Does the settings for bodymovin apply to that React-bodymovin as well?

[bodymovin]

@XBLDev can you share a link with the demo? If you need to set the preserveAspectRatio value, it might not be supported

[XBLDev]

@bodymovin Hi Thanks for your reply! The code is at: https://github.com/XBLDev/EddyApp, the site hosted on Amazon EC2: http://54.149.105.121/. The code is rather messed up since I had no time to tidy/format it properly, so apologies ahead of time :-)

[bodymovin]

@XBLDev what is the behavior you're expecting?
you're probably looking for "xMidYMid slice" or "xMidYMid meet"
and try setting "animationContainer" and "react-bodymovin-container" height and width to 100%

[XBLDev]

Hi @bodymovin I'll look it into it and update you if I fix it/still have problem

[XBLDev]

@bodymovin Hi I experimented with different ways in the past couple days, the only way I found which won't let the animation stretch all the way out of screen, is to set a max-width to the container of the animation. It's no good but at least for now it won't go out of screen when the screen is re-sized, in the future I might have to find a way to make the size of the container responsive.

[Darrel-Collinsworth]

I'm having some trouble where it's taking longer than 5 minutes to render a small 2 second animation. I think something may not be running right. I'm new to using Bodymovin so I'm at a loss for what to do at this point :( Love the idea and I can't wait to start animating!

I also just tried reverting back to version 5.0.4, and it gave me the same error which is on line 215. Don't know if that will help to diagnose.

[bodymovin]

@Darrel-Collinsworth hi, can you share the .aep so I can check it out?

[Darrel-Collinsworth]

Hey buddy, thanks for getting back to me
I think the issue was I didn't have the "hidden" option checked. I was
using an alpha matt, but when I deleted the mask, the render worked.

If I run into any other problems, I'll definitely reach out again.

Have a good holiday and thanks for the awesome program!
-Darrel

On Dec 19, 2017 20:39, "hernan" [e-mail] wrote:

@Darrel-Collinsworth https://github.com/darrel-collinsworth hi, can you
share the .aep so I can check it out?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/airbnb/lottie-web/issues/85#issuecomment-352938921,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHRR-rpiAHkqRE-RNc31vavxNbMkGeA3ks5tCGQ8gaJpZM4IZ1qx
.

[lucientaylor]

Hi, by digging into this thread we were successfully able to preserve the aspect ratio of an svg by playing with the renderersettings - as advised. Are these settings documented anywhere? I've tried 1) the download 2) the docs [http://airbnb.io/lottie/web/getting-started.html] and 3) the composition settings [https://github.com/airbnb/lottie-web/wiki/Composition-Settings] - and I can't find any reference to the full set of loadAnimation params.

[vOtto]

@bodymovin where can i find complete list of all options i can pass to rendererSettings ?

[bodymovin]

@vOtto I've added them to the wiki page
https://github.com/airbnb/lottie-web/wiki