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...
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.
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?
Alkshendra Maurya
Frontend Engineer | Hashnode Alumnus
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 :)