1

I have project right now. I'm building a website with a developer guy. I shared all the assets using Zeplin. But since this is the first time, I should also share how everything should behave. I have a set of rules based in motion and values, but what is the proper way to do that; the parallax effects, and all the other stuff?

Improve this question

2 Answers 2

Reset to default
2

I have no idea about Zeplin but I use others like AE, Pixate and Flinto to make UX animations. When it's needed to tell our developers how my demo works and the effects I required, I recorded the motions, parameters and figures I set. Like this:

  1. the "confirm" button drops down by 30px in 1 second, with its Y-axis value changed from 100 to 130.

  2. the floating button gradually disappears in 2s, with its opacity value changed from 80% to 0%. And in the meantime, its size changed from 100% to 0%.

In a word, it's all about

1. object + changes(position，scale, rotation, color, transparency) + time.

2. whether the several changes of one object or different objects happen in a same time interval or not.

If it's too complex, a timeline would be helpful to figure it out.

Hope I catch your meaning and this helps :)

Improve this answer
0

It all depends on one's skill set.

I know AE, so I can create any 2D animation I like, and then I can use Lotti (formerly Bodymovin), which transforms my animation into a json file the developers can simply use it on the website. If there are no complex animations and loading Lottie hurts performance, there is Firefox's tool for converting the json Lottie produced into an svg sprite, which results in a very light animation and excellent performance!

If I wouldn't have known AE, I would have found good references to send to the developers. References are good in several ways a) They translate one's meaning very well b) They add other aspects of the behavior which you neglected to mention c) Developers can simply use the libraries used at the example you gave and save time looking for solutions to their problem. A good reference is first of all the one you were looking at when you designed that behavior, and if there isn't any than a working website with the animation you requested is great. A good place to look for such references is this excellent website which provides solutions as well as application examples.

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.