1

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.

Improve this question
8
  • 1
    Isn't this a question for BodyMov support?
    – Scott
    Commented Mar 14, 2018 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
    Commented Mar 14, 2018 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
    Commented Mar 14, 2018 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
    Commented Mar 15, 2018 at 11:10
  • See What's the best way to animate an illustration for the web?
    – Zach Saucier
    Commented May 14, 2018 at 9:55

2 Answers 2

Reset to default
1

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

Improve this answer
4
  • 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
    Commented Mar 14, 2018 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
    Commented Mar 14, 2018 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
    Commented Mar 14, 2018 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
    Commented Mar 14, 2018 at 21:32
-1

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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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