Skip to content

Commit 14463de

Browse files
author
daniel-lundin
committed
Update demo, fix various bugs in new implementation
1 parent 387dad7 commit 14463de

File tree

5 files changed

+102
-54
lines changed

5 files changed

+102
-54
lines changed

‎periodic.html

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,8 @@
1616
height: 90vh;
1717
margin: 0 auto;
1818
transform-style: preserve-3d;
19+
-webkit-transform-style: preserve-3d;
1920
cursor: move;
20-
/*overflow: hidden;*/
21-
/*perspective: 800px;*/
2221
}
2322

2423
.root {
@@ -27,7 +26,7 @@
2726
height: 90vh;
2827
margin: 0 auto;
2928
transform-style: preserve-3d;
30-
/*perspective: 500px;*/
29+
-webkit-transform-style: preserve-3d;
3130
}
3231

3332
.element {
@@ -59,30 +58,44 @@
5958
.controls {
6059
text-align: center;
6160
height: 10vh;
61+
position: relative;
62+
transform: translateZ(10000px);
63+
z-index: 1;
6264
}
6365
.controls__button {
6466
border: 0;
65-
padding: 10px 30px;
66-
margin: 0 10px;
67-
background: rgba(30, 117, 123, 0.34);
67+
padding: 1vh 3vh;
68+
background: rgb(30, 37, 30);
6869
color: white;
69-
font-size: 20px;
70+
font-size: 3vh;
71+
line-height: 4vh;
72+
margin: 3vh 1vh;
73+
cursor: pointer;
74+
}
75+
76+
.controls__button--selected {
77+
background: rgb(30, 117, 123);
78+
}
79+
80+
.controls__button:focus {
81+
outline: none;
7082
}
7183

7284
</style>
7385
</head>
7486
<body>
7587
<div class="controls">
76-
<button id="table" class="controls__button">Table</button>
88+
<button id="table" class="controls__button controls__button--selected">Table</button>
7789
<button id="grid" class="controls__button">Grid</button>
7890
<button id="spiral" class="controls__button">Spiral</button>
7991
</div>
8092
<div class="container">
8193
<div class="root">
8294
</div>
8395
</div>
96+
<div id="log"></div>
8497
<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
85-
<script src="snabbt.js"></script>
98+
<script src="bundle.js"></script>
8699
<script src="periodic.js"></script>
87100
</body>
88101
</html>

‎periodic.js

Lines changed: 55 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ var chemicalElements = [
123123
];
124124

125125
var domElements = [];
126-
var springConstant = 0.5;
126+
var springConstant = 0.4;
127127
var springDeceleration = 0.7;
128128

129129
function elementDelay(i) {
@@ -154,22 +154,20 @@ function createElements() {
154154

155155
function tableFormation() {
156156
var columns = 17;
157-
var rows = 9;
157+
var rows = 10;
158158
var spacing = 60;
159159
var baseXOffset = -Math.floor(columns / 2) * spacing;
160160
var baseYOffset = -Math.floor(rows / 2) * spacing;
161161
snabbt(domElements, {
162162
rotation: [0, 0, 0],
163163
position: function(i) {
164164
var e = chemicalElements[i];
165-
//return [spacing - (i % 2) * 2 * spacing, e.period * spacing, 0];
166165
return [baseXOffset + (e.group - 1) * spacing, baseYOffset + e.period * spacing, 0];
167166
},
168167
easing: 'spring',
169168
springConstant: springConstant,
170169
springDeceleration: springDeceleration,
171170
delay: elementDelay
172-
173171
});
174172
}
175173

@@ -190,8 +188,6 @@ function gridFormation() {
190188
var col = indexWithinLayer % cols;
191189
return [baseXOffset + col * spacing, baseYOffset + row * spacing, layerOffset - layerIndex * layerSpacing];
192190
},
193-
//delay: function(i) { return i * 5; },
194-
duration: 10000,
195191
easing: 'spring',
196192
springConstant: springConstant,
197193
springDeceleration: springDeceleration,
@@ -225,7 +221,6 @@ function spiralFormation() {
225221
}
226222

227223
function setupCameraControls(container, root) {
228-
var hammertime = new Hammer(container, { direction: Hammer.DIRECTION_ALL });
229224
var translateZ = 0;
230225
var rotateX = 0;
231226
var rotateY = 0;
@@ -235,8 +230,10 @@ function setupCameraControls(container, root) {
235230
var rotateYVelocity = 0;
236231

237232
root.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg)';
233+
root.style.webkitTransform = 'perspective(1000px) rotateY(0deg) rotateX(0deg)';
238234
function updateCamera(rotX, rotY, transZ) {
239-
root.style.transform = 'perspective(1000px) translateZ(' + transZ + 'px) rotateY(' + rotX + 'deg) rotateX(' + rotY + 'deg)';
235+
root.style.transform = 'perspective(1000px) translateZ(' + transZ + 'px) rotateY(' + rotX + 'deg) rotateX(' + -rotY + 'deg)';
236+
root.style.webkitTransform = 'perspective(1000px) translateZ(' + transZ + 'px) rotateY(' + rotX + 'deg) rotateX(' + -rotY + 'deg)';
240237
}
241238

242239
function stepCamera() {
@@ -245,15 +242,20 @@ function setupCameraControls(container, root) {
245242
var rotX = rotateX + rotateXOffset;
246243
var rotY = rotateY + rotateYOffset;
247244

248-
249245
rotateXVelocity *= 0.99;
250246
rotateYVelocity *= 0.99;
247+
251248
updateCamera(rotX, rotY, translateZ);
252249

253250
window.requestAnimationFrame(stepCamera);
254251
}
255252
window.requestAnimationFrame(stepCamera);
256253

254+
var hammertime = new Hammer(container, { direction: Hammer.DIRECTION_ALL });
255+
hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
256+
hammertime.get('pinch').set({ enable: true });
257+
258+
257259
hammertime.on('pan', function(ev) {
258260

259261
rotateXOffset = ev.deltaX / 10;
@@ -268,12 +270,17 @@ function setupCameraControls(container, root) {
268270
rotateXOffset = 0;
269271
rotateYOffset = 0;
270272
}
271-
updateCamera();
272273
});
273274
container.addEventListener('mousewheel', function(ev) {
274275
translateZ += ev.deltaY;
275276
translateZ = Math.min(Math.max(0, translateZ), 600);
276-
updateCamera();
277+
});
278+
279+
var log = document.getElementById('log');
280+
hammertime.on('pinch', function(ev) {
281+
//ev.scale
282+
log.innerText = ev.scale;
283+
translateZ = Math.min((ev.scale - 1) * 600, 600);
277284
});
278285
}
279286

@@ -284,27 +291,55 @@ function initEventListeners() {
284291
var gridButton = document.getElementById('grid');
285292
var spiralButton = document.getElementById('spiral');
286293

287-
window.addEventListener('scroll', function(evt) {
288-
console.log('scroll');
289-
evt.preventDefault();
290-
evt.stopPropagation();
291-
return false;
292-
});
293-
294294
tableButton.addEventListener('click', function() {
295295
tableFormation();
296+
tableButton.classList.add('controls__button--selected');
297+
gridButton.classList.remove('controls__button--selected');
298+
spiralButton.classList.remove('controls__button--selected');
296299
});
297300
gridButton.addEventListener('click', function() {
298301
gridFormation();
302+
tableButton.classList.remove('controls__button--selected');
303+
gridButton.classList.add('controls__button--selected');
304+
spiralButton.classList.remove('controls__button--selected');
299305
});
300306
spiralButton.addEventListener('click', function() {
301307
spiralFormation();
308+
tableButton.classList.remove('controls__button--selected');
309+
gridButton.classList.remove('controls__button--selected');
310+
spiralButton.classList.add('controls__button--selected');
302311
});
303312

304313
setupCameraControls(container, root);
305314
}
306315

316+
function initPositions() {
317+
var distance = 400;
318+
snabbt(domElements, {
319+
fromPosition: function() {
320+
return [
321+
distance - 2 * distance * Math.random(),
322+
distance - 2 * distance * Math.random(),
323+
distance - 2 * distance * Math.random()
324+
];
325+
},
326+
position: function() {
327+
return [
328+
distance - 2 * distance * Math.random(),
329+
distance - 2 * distance * Math.random(),
330+
distance - 2 * distance * Math.random()
331+
];
332+
},
333+
fromOpacity: 0,
334+
opacity: 1,
335+
duration: 1000,
336+
easing: 'ease',
337+
allDone: function() {
338+
tableFormation();
339+
}
340+
});
341+
}
342+
307343
createElements();
308-
tableFormation();
309-
//rootAnimation();
344+
initPositions();
310345
initEventListeners();

‎src/animation.js

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -36,21 +36,11 @@ function createAnimation(startState, endState, options) {
3636

3737
// Public api
3838
return {
39-
stop() {
40-
stopped = true;
41-
},
42-
43-
endState() {
44-
return endState;
45-
},
46-
47-
isStopped() {
48-
return stopped;
49-
},
50-
51-
isStarted() {
52-
return started;
53-
},
39+
options() { return options; },
40+
stop() { stopped = true; },
41+
endState() { return endState; },
42+
isStopped() { return stopped; },
43+
isStarted() { return started; },
5444

5545
finish(callback) {
5646
manual = false;
@@ -171,13 +161,9 @@ function createAttentionAnimation(options) {
171161

172162
// Public API
173163
return {
174-
stop: function() {
175-
stopped = true;
176-
},
177-
178-
isStopped() {
179-
return stopped;
180-
},
164+
options() { return options; },
165+
stop: function() { stopped = true; },
166+
isStopped() { return stopped; },
181167

182168
tick() {
183169
if (stopped)

‎src/engine.js

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,21 +51,30 @@ var Engine = {
5151
archiveCompletedAnimations() {
5252
var unFinished = this.runningAnimations.filter((animation) => !animation[1].completed());
5353
var finished = this.runningAnimations.filter((animation) => animation[1].completed());
54+
5455
var queuedAnimations = this.createQueuedAnimations(finished);
55-
finished = this.runningAnimations.filter((finishedAnimation) => {
56+
var completed = finished.filter((finishedAnimation) => {
5657
return !queuedAnimations.find((queuedAnimation) => {
5758
return queuedAnimation[0] !== finishedAnimation[0];
5859
});
5960
});
6061

6162
Engine.runningAnimations = unFinished;
6263
this.completedAnimations = this.completedAnimations.filter((animation) => {
63-
return finished.find((finishedAnimation) => {
64+
return completed.find((finishedAnimation) => {
6465
return finishedAnimation[0] !== animation[0];
6566
});
6667
});
67-
Array.prototype.push.apply(this.completedAnimations, finished);
68+
Array.prototype.push.apply(this.completedAnimations, completed);
6869
Array.prototype.push.apply(this.runningAnimations, queuedAnimations);
70+
71+
// Call complete callback
72+
finished.forEach((animation) => {
73+
var completeCallback = animation[1].options().complete;
74+
if (completeCallback)
75+
completeCallback();
76+
});
77+
6978
},
7079

7180
createQueuedAnimations(finished) {
@@ -142,4 +151,5 @@ var Engine = {
142151
}
143152
};
144153

154+
window.Engine = Engine;
145155
module.exports = Engine;

‎src/properties.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,13 @@ function preprocessOptions(options, index, len) {
5555
var properties = Object.keys(tweenableProperties).concat(['transformOrigin', 'duration', 'delay']);
5656

5757
properties.forEach(function(property) {
58+
var fromProperty = fromPrefixed(property);
5859
if (utils.isFunction(options[property])) {
5960
clone[property] = options[property](index, len);
6061
}
62+
if (utils.isFunction(options[fromProperty])) {
63+
clone[fromProperty] = options[fromProperty](index, len);
64+
}
6165
});
6266

6367
return clone;

0 commit comments

Comments
 (0)