Comment by Homer Gaines, CPACC on "Know any good tutorial for layout transition animation?"

It would be easier to help you solve this if your were to post an example of what you are working on.

Aside form that, you should first look at every element you need to move as individual parts. That way you can map out and envision their motion paths. After you have and idea about how they should move you can attack it from a few points of view. I would suggest using key frame animations or transformations to complete your sequence.

Here's a nice book on CSS animation A Pocket Guide to CSS animations by Val Head

Other links you might find useful.

Hope this helps.

Hey @xirclebox, thank you for your answer and references. I have examined 3 main options for animations and came to the following conclusion. SVG animations are a good fit for character animations. CSS is an option for simple animations to a certain level of complexity. GSAP is the bomb in terms of a full fledged easy-to-use api, performance and maintainability. Have a look at one of the examples you referenced - antoniodinardo.com/TEST/confirmationpopup A pretty straightforward button transition and the simplest isolated example I could find. Now let's take a look at its actual CSS animation - antoniodinardo.com/TEST/confirmationpopup/css/sty… Does it look anywhere reasonable to anyone to write this amount of code to get this simple button animation effect? I don't want to even begin on what would it take to code CSS animations for this site for example - chekhov.withgoogle.com/alive This level of complexity is what I'm aiming for. The character animations of this example were coded with morphSVG and the overall transitions were coded using GSAP. like others here - materialup.com/posts/tool/development/tween_max

Still, as a foot note I would say that we're lacking tools to provide us an easy workflow for designers to express their ideas and generate animation code using a simple GUI. We could do a lot better in 2016.

Search Hashnode