Daybrush (Younkue Choi) daybrush

	Scene.js	CSS
	easing	animation-timing-function
	iterationCount	animation-iteration-count
	duration	animation-duration
	fillMode	animation-fill-mode
	direction	animation-direction
	delay	animation-delay
	playState	animation-play-state

This gist outlines how to resize a view when a keyboard appears using Auto Layout (there are a bunch of code samples out there that manually adjust the view's frame, but that's just so 2013). The method I outline below works universally on both iPhone and iPad, portrait and landscape, and is pretty darn simple.

Setting Up

The first thing to do is to define our containing view controller, the view, and the bottom constraint that we'll use to adjust its size.

Here's HeightAdjustingViewController.h. We don't need to expose any public properties, so it's pretty bare.

Scene.js React Timeline

A library that represents the timeline of Scene.js
You can control time, properties, and items.

Scene.js / Scene.js Timeline /

	/* CSS */
	.selector {
	animation-name: a;
	animation-duration: 3s;
	animation-timing-function: ease;
	-webkit-animation-name: a;
	-webkit-animation-duration: 3s;
	-webkit-timing-function: ease;
	-moz-animation-name: a;
	-moz-animation-duration: 3s;

	<style>
	/* CSS */
	.selector {
	animation-name: a;
	animation-duration: 3s;
	}
	@keyframes a {
	0% {
	left: 0%;
	}

	var traverse = require("@babel/traverse").default;
	var t = require("@babel/types");

	function convert(ast) {
	traverse(ast, {
	ClassMethod(path) {
	const node = path.node;
	node.type = "MethodDefinition";
	node.value = t.functionExpression(null, node.params, node.body, node.generator, node.async);
	node.value.returnType = node.returnType

	import JavaScriptCore

	extension JSContext {
	subscript(key: String) -> Any {
	get {
	return self.objectForKeyedSubscript(key)
	}
	set{
	self.setObject(newValue, forKeyedSubscript: key as NSCopying & NSObjectProtocol)
	}

	/* Scene.js */
	new Scene({
	".selector": {
	0: {
	transform: {
	tranlsate: "0px",
	},
	},
	1: {
	transform: {

	scene.play(); // Play JavaScript animation
	scene.playCSS(); // Play CSS animation

	<div class="squares">
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>