Know any good tutorial for layout transition animation?

Hi all, I'm looking for a step by step tutorial for transitions like this one (click the girl...) or this one Very simple transitions but still I can't wrap my head around it - even with flexbox - UI elements on the page are constraint. and this is exactly what is appealing in these transitions, they act as if they are unbounded by these constrains and simply fly around from anywhere. Do they switch to absolute and animate with translate() or what... I see this technique everywhere and am looking for a good tutorial to help me solve this riddle...

You should take a look at SVG animations, it is better to use SVGs for animation when the elements involved are changing their shapes and are moving along a specified path.

I can't really suggest an end to end tutorial but you can go through these articles to learn about native SVG animations and their CSS alternatives css-tricks.com/guide-svg-animations-smil and css-tricks.com/smil-is-dead-long-live-smil-a-guid…

Also, check out snapsvg.io, a nice library for creating SVG animations and greensock’s morphSVG which is another plugin for playing with SVG shape modifications (greensock.com/morphSVG)

Codrops also does some awesome things with SVGs (tympanus.net/codrops) you can browse through for some inspiration :)

Hi @alkshendra and thank you for the reply. I have looked at SVG animations and liked morphSVG by greensock. I think SVG animations are a good fit for some of the cases which are more "artistic" like character animation for example. My need at the moment is simply transitions of UI elements on the "page". Take a look at this site for example - chekhov.withgoogle.com/alive The characters are definitely animated with SVG animations but the site layout and transition from one section to another is being done in JS with GSAP. I think I've just answered myself :)

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.

I've made a small animation test, trying to mimic this simple effect My code is available here and this is a screen-capture recording the results. 4 browsers from left to right: IE11 - a complete mess, not web worthy... then Microsoft Edge 13 - notice a round circle is a bit too much to ask... I used border-radius. Then comes the mighty Google chrome - notice how the animation elements are pixelated during the animation to achieve "performance"... and last is Firefox which is the only browser that delivered a sharp result although the movement was a bit jumpy lacking smoothness and elegance. I've used GSAP which uses a css plugin to animate the css properties via JS. Someone please tell me how this site is looking great even on IE11? It uses the same GSAP animation library as mentioned here... Any thoughts on techniques they may have used to improve the appearance of these animation?

Thread

Know any good tutorial for layout transition animation?

Responses(3)

Recent threads

Search Hashnode

Know any good tutorial for layout transition animation?

Responses(3)

Recent threads