On our new "how it works" page we want to use animated graphics to better explain some concepts of our service. We don't have any experience with more complex animations and we decided to try Bodymovin, as creating the animations in After Effects saves valuable dev ressources. However, some of the visual elements will need to change their size and layout, depending on the viewport.

Now we wonder, if Bodymovin is the right choice: Is it possible to somehow access the SVG and change those properties while keeping the animation intact? Or do we need a (slightly) different SVG for each viewport, each with its own Bodymovin json animation file? Because in this case this page is going to be huge ...

In general: If you have any suggestions, best practices, life examples of Bodymovin, I'd be very grateful to check those out.

bumped to the homepage by Community 2 days ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

  • 1
    Isn't this a question for BodyMov support? – Scott Mar 14 at 12:01
  • Idk, is there something like Bodymovin support? After all, it's just an AE extension ... but I will check. My hope was, that someone else had this problem already and solved it. Or at least can answer my question. – fgrau Mar 14 at 14:15
  • This definitely is more of a support question than a design question. You better ask the plugin developers instead of us: aescripts.com/bodymovin – Luciano Mar 14 at 15:49
  • This is a "real product"-question: I'm searching for people, who tried Bodymovin and have experience with it. That's "product design". – fgrau Mar 15 at 11:10

Bodymovin is the best you would find if you are looking to animate simple or even complex animations. It doesn't need much dev work, the pluging itself has a render option which allows you to spit out the code, even .json code to use it in IOS apps or also android apps.

But make sure your svg's don't have gradients. Lottie can't export gradients & soft edges

Here is the exports sheet

enter image description here

So yea give it a go.

Personally i used it for an onboarding for the Fox Sports NRL app

https://dribbble.com/shots/4162353-Onboarding-Animation

  • I'm sorry, but this doesn't answer my question. My question is, if I need multiple key visuals (and animations) for different viewports, if the smaller size of the viewports demands a layout change within those key visuals. – fgrau Mar 14 at 9:47
  • Sorry, i don't understand what you mean by key visuals and viewpoints ? Can you link me an example what you want to create ? – Alex Satriani Mar 14 at 10:17
  • The "viewport" is the visible area of a website within a browser window; with "key visuals" I mean some kind of graphic element that is placed on the website. Take any product page on Dribbble with the usual alternating "text left - image right" layout: When it's a responsive site and the viewport gets narrower, the images don't have as much space anymore and need to change. – fgrau Mar 14 at 14:12
  • Ah right, got ya! Google Web Designer is what you are looking for, it detect automatically that. Wheres Bodymovin is just the size you create and the viewpoint doesn't change. – Alex Satriani Mar 14 at 21:32

There is another great tool that could cover all your needs. I mean Google Web Designer.

With thi tool you can build

  • responisve layouts
  • use components
  • call events
  • use multiple pages
  • animate in 2D and 3D

and a lot of more. Definitely you should try this tool.

  • And I forgot: You can use Media Rules that's suits your question about viewports. – touchthedot May 14 at 5:53
  • Seems to be more an advertisement than a solution for the given question ... – Kurt May 14 at 10:08

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.