Zoom In and Out Transition in Codenameone - animation

Question

Inspired by native Android zoomOut for form transitions and iOS app launching zoom effect, which are both really cool...
How do I go about implementing zoom In or Out transition for Forms, Dialogs and Containers in Codenameone?
I want the transition to have zooming animation like below:
#charset "UTF-8";
*,
:before,
:after {
margin: 0;
padding: 0;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input,
select,
button,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font: inherit;
color: inherit;
}
.butt,
.input {
padding: .75rem;
margin: .375rem;
background-color: transparent;
border-radius: 4px;
}
.butt:focus,
.input:focus {
outline: none;
}
.butt {
border: 2px solid #f35626;
line-height: 1.375;
padding-left: 1.5rem;
padding-right: 1.5rem;
font-weight: 700;
color: #f35626;
cursor: pointer;
-webkit-animation: hue 60s infinite linear;
}
.butt--primary {
background-color: #f35626;
color: #fff;
}
.input {
border: 1px solid #c0c8c9;
border-radius: 4px;
}
.input--dropdown {
background-image: url("images/ddown.png");
background-image: url("images/ddown.svg?3"), none;
background-repeat: no-repeat;
background-size: 1.5rem 1rem;
background-position: right center;
}
h1,
.alpha {
margin-bottom: 1.5rem;
font-size: 3rem;
font-weight: 100;
line-height: 1;
letter-spacing: -.05em;
}
h2,
.beta {
margin-bottom: .75rem;
font-weight: 400;
font-size: 1.5rem;
line-height: 1;
}
#media (min-width: 650px) {
.mega {
font-size: 6rem;
line-height: 1;
}
}
.subhead,
.meta {
color: #7b8993;
}
.promo {
text-align: center;
}
p,
hr,
form {
margin-bottom: 1.5rem;
}
hr {
border: none;
margin-top: -1px;
height: 1px;
background-color: #c0c8c9;
background-image: -webkit-linear-gradient(0deg, #fff, #c0c8c9, #fff);
}
a {
color: inherit;
text-decoration: underline;
-webkit-animation: hue 60s infinite linear;
}
a:hover {
color: #f35626;
}
.wrap {
max-width: 38rem;
margin: 0 auto;
}
.island {
padding: 1.5rem;
}
.isle {
padding: .75rem;
}
.spit {
padding: .375rem;
}
html {
font: 100%/1.5"Roboto", Verdana, sans-serif;
color: #3d464d;
background-color: #fff;
-webkit-font-smoothing: antialiased;
width: 100%;
overflow: hidden-x;
text-align: center;
}
#media (min-width: 650px) {
html {
height: 100%;
}
html:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
body {
display: inline-block;
vertical-align: middle;
max-width: 38rem;
}
}
.site__header {
-webkit-animation: bounceInUp 1s;
}
.site__title {
color: #f35626;
background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 60s infinite linear;
}
.site__content {
-webkit-animation: bounceInUp 1s;
-webkit-animation-delay: .1s;
}
.site__content form {
-webkit-animation: bounceInUp 1s;
-webkit-animation-delay: .1s;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
.animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
#-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
#keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
#-webkit-keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
#keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, minimal-ui" />
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="dns-prefetch" href="//code.jquery.com" />
<link href='//fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="site__header island">
<div class="wrap">
<span id="animationSandbox" style="display: block;"><h1 class="site__title mega">Zoom me in and out</h1></span>
</div>
</header>
<!-- /.site__header -->
<main class="site__content island" role="content">
<div class="wrap">
<form>
<select class="input input--dropdown js--animations">
<optgroup label="Zoom Entrances">
<option value="zoomIn">zoomIn</option>
</optgroup>
<optgroup label="Zoom Exits">
<option value="zoomOut">zoomOut</option>
</optgroup>
</select>
<button class="butt js--triggerAnimation">Animate it</button>
</form>
<hr />
</div>
</main>
<!-- /.site__content -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
function testAnim(x) {
$('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
$(this).removeClass();
});
};
$(document).ready(function() {
$('.js--triggerAnimation').click(function(e) {
e.preventDefault();
var anim = $('.js--animations').val();
testAnim(anim);
});
$('.js--animations').change(function() {
var anim = $(this).val();
testAnim(anim);
});
});
</script>
</body>
</html>

Answer 1

Probably the closest thing to some of the Android effects is the Morph transition between forms that allows a component to grow into the next form http://www.codenameone.com/blog/mighty-morphing-components.html
If you want something closer to the above code you can just position the component in the right location and make it smaller then use animateLayout() to make it grow into place.
In the old days we had a FlyIn transition which mapped to this exactly but it used old 3D code. I think it should be trivial to implement though with the affine transform and scale similarly to the FlipTransition.