Skip to content

Instantly share code, notes, and snippets.

@motss

motss/play_and_reverse_using_<Element.animate>.js

Last active November 21, 2016 14:35
Show Gist options
  • Save motss/284b114eaca343ca6fe8c0442682a1bf to your computer and use it in GitHub Desktop.
Save motss/284b114eaca343ca6fe8c0442682a1bf to your computer and use it in GitHub Desktop.
Download ZIP
play and reverse using Element.animate
Raw
play_and_reverse_using_<Element.animate>.js
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<base href="https://polygit2.appspot.com/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<script>
window.Polymer = {
dom: 'shadow',
lazyRegister: 'max',
useNativeCSSProperties: true,
};
if (!document.createElement('div').animate) {
var script = document.createElement('script');
script.src = 'web-animations-js/web-animations.min.js';
script.async = true;
script.defer = true;
document.head.appendChild(script);
console.info('Loading Web Animations polyfill...');
}
</script>
<link href="polymer/polymer.html" rel="import">
</head>
<body>
<style>
body {
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
min-height: 100v;
background-color: #eee;
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
.container {
height: 500px;
width: 100%;
border: 1px solid #000;
}
</style>
<div class="container">
<x-example></x-example>
</div>
<dom-module id="x-example">
<template>
<style>
:host {
display: block;
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
overflow: hidden;
border: 1px solid green;
--app-primary-color: #4285f4;
--app-primary-text-color: #4a4a4a;
--app-motion-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
--app-motion-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
--app-motion-ease-in: cubic-bezier(0.4, 0.0, 1, 1);
--app-motion-sharp: cubic-bezier(0.4, 0.0, 1, 1);
}
* {
box-sizing: border-box;
}
.container {
/* border: 1px solid blue; */
position: fixed;
left: -10%;
height: 100%;
width: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
will-change: transform;
}
.circle-container {
/* border: 1px solid red; */
position: absolute;
bottom: -10%;
left: 0;
width: 200px;
height: 300px;
overflow: hidden;
}
.circle {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
position: absolute;
top: 50%;
left: calc(50% - 16px);
width: 32px;
height: 32px;
background-color: #000;
border-radius: 50%;
cursor: pointer;
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
will-change: transform;
}
button {
position: fixed;
}
button + button {
margin-top: 20px;
}
</style>
<div id="container" class="container">
<div id="circleContainer" class="circle-container">
<button id="circle" class="circle" on-click="run"></button>
</div>
</div>
</template>
<script>
window.addEventListener('WebComponentsReady', function () {
var APP_MOTIONS = {
STANDARD: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
EASE_OUT: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
EASE_IN: 'cubic-bezier(0.4, 0.0, 1, 1)',
SHARP: 'cubic-bezier(0.4, 0.0, 1, 1)',
};
Polymer({
is: 'x-example',
properties: {
isReverse: Boolean,
setupFinished: Boolean,
containerPlayback: Object,
circleContainerPlayback: Object,
circlePlayback: Object,
},
attached: function () {
this.set('isReverse', true);
},
run: function () {
var isReverse = !this.isReverse;
this.playMotion(isReverse);
this.playMotion(isReverse);
this.set('isReverse', isReverse);
},
playMotion: function (reverse) {
console.log(reverse);
var containerPlayback = null;
var circleContainerPlayback = null;
var circlePlayback = null;
var playbackRate = reverse ? -1 : 1;
//if (true) {
var container = this.$.container;
var circleContainer = this.$.circleContainer;
var circle = this.$.circle;
// in animation:
// container - ease_out
// circleContainer - ease_in
// circle - sharp
// out animation:
// container - ease_in
// circleContainer - ease_out
// circle - sharp
containerPlayback = container.animate([
{ transform: 'translate3d(0, 0, 0)', },
{ transform: 'translate3d(50%, 0, 0)', },
], {
fill: 'both',
duration: 250,
easing: reverse ? APP_MOTIONS.EASE_IN : APP_MOTIONS.EASE_OUT,
});
circleContainerPlayback = circleContainer.animate([
{ transform: 'translate3d(0, 0, 0)', },
{ transform: 'translate3d(0, -100px, 0)', },
], {
fill: 'both',
duration: 250,
easing: reverse ? APP_MOTIONS.EASE_OUT : APP_MOTIONS.EASE_IN,
});
circlePlayback = circle.animate([
{ transform: 'translate3d(10%, 0, 0) scale3d(1, 1, 1)', },
{ transform: 'translate3d(10%, 0, 0) scale3d(2, 2, 1)', },
{ transform: 'translate3d(10%, 0, 0) scale3d(10, 10, 1)', },
{ transform: 'translate3d(10%, 0, 0) scale3d(20, 20, 1)', },
{ transform: 'translate3d(10%, 0, 0) scale3d(50, 50, 1)', },
], {
fill: 'both',
duration: 250,
easing: APP_MOTIONS.SHARP,
});
//this.set('containerPlayback', containerPlayback);
//this.set('circleContainerPlayback', circleContainerPlayback);
//this.set('circlePlayback', circlePlayback);
//this.set('setupFinished', true);
//}
//containerPlayback = this.containerPlayback;
//circleContainerPlayback = this.circleContainerPlayback;
//circlePlayback = this.circlePlayback;
containerPlayback.playbackRate = playbackRate;
circleContainerPlayback.playbackRate = playbackRate;
circlePlayback.playbackRate = playbackRate;
containerPlayback.play();
circleContainerPlayback.play();
circlePlayback.play();
return Promise.all([
containerPlayback.finished,
circleContainerPlayback.finished,
circlePlayback.finished,
]);
},
});
});
</script>
</dom-module>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment