2

The developer at my studio is pushing me to create more compelling/interactive mockups of websites. We are at a total loss as to how I can communicate the specifics of the animations in these mockups to our developers.

Here are a few example sites that sort of do the animations that I am envisioning: https://www.culturallyconnected.ca/
https://everytown.org/momentsthatsurvive/
http://www.oxymoronagency.com/works/ravekjaviks
https://www.joinroot.com/year-in-review-2018/

I could, of course, animate in After Effects or use SVGator to make these mockups. But how are designers communicating the timing, curves, etc to developers!!!??? There is so many people doing animations like this right now so I KNOW there has to be a way!

For a little more context we use Sketch + Craft + InVision currently to present website concepts to our clients.

Improve this question
5
  • 2
    The only real way to convey animation is to animate it.
    – joojaa
    Dec 5, 2019 at 14:44
  • Hey Kali. Communicating to developers and clients is very different in this case. What do you mean communicating to clients in respect to an interactive design? In terms of communicating to developers, you can either 1) give them a static design and let them run with it (depends on the skillset of the dev) or 2) give them an animated mockup and tell them to recreate it as best as they can. There are some tools that export particular types of animations from AE but they are limited in what they can do.
    – Zach Saucier
    Dec 5, 2019 at 15:01
  • When I use Sketch and upload to Invision, it gives my developer the CSS code for each element and was hoping there was some animation equivalent. The developer I work with is not comfortable with "running with it". Thanks!
    – Kali Robinson Rothwell
    Dec 6, 2019 at 15:38
  • Kali, I edited your question to make it more focused on what you seem to care more about - how to convey the animation to your developers. Feel free to edit it if I removed something you felt was necessary or want to add more details. But please make a new question if you want to ask about how to show clients animation ideas that you have because that is a whole different question :)
    – Zach Saucier
    Dec 6, 2019 at 16:20
  • 1
    Probably not a real answer but for me personally simply recording a video of me moving hands with 'wooosh' sounds works great. This gives curves and timings and it's super easy to iterate. However I imagine sending something like that to a stranger might be difficult for some people.
    – Sergey Kritskiy
    Dec 6, 2019 at 16:47

2 Answers 2

Reset to default
1

There are probably many ways of doing this. If you're already familiar with After Effects, you can use it to create your SVG animations and export them with the help of the Bodymovin AE Plugin (~ USD 20). It will create a JSON file with the animation, that can be triggered by Javascript then.

Here's a tutorial

Improve this answer
0

Note: In general the answer I wrote applies to the more complex animations, like your example 1. Some of the other examples you posted are pretty simple and can be addressed just talking to your team.

Short answer:

If you want to animate an animation, and want the final animation to be like the one you already animated... Just prepare the animation to be used as the final animation...

Aka, learn the proper way to do it from start.

Long one:

But how are designers communicating the timing, curves, etc to developers!!!???

The line is blurrier than you think. For me, the design is not making things look pretty, but also functional. And to be functional you need to really understand the medium where it is going to be published. It is not about letting someone else solving the technical problem. Do it yourself.

There are so many people doing animations like this right now so I KNOW there has to be a way!

Yes, there are people actually doing them. That is the point. You already mentioned svgator which makes an SVG animation that can be used as it is. That is not a mockup, that could be the final file.

You need to dive into the different ways to do animations for the web.

Final note. It will be a lot easier in human resources in the short term and in the long one that you learn how to animate using different tools, than a coder to learn how to make an animation look right. The main factor is: you are interested, they are probably not. Animating is about perception, feeling, and those subjective things are harder to learn than a technical aspect.

But in the end, they will probably need to learn that same tool anyway.

For the simpler examples, I will not consider them to really be animations, but user-triggered events, and there are some frameworks for that, like http://imakewebthings.com/waypoints/guides/getting-started/

Improve this answer

Your Answer

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

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