Skip to content
Snippets Groups Projects
Commit 02bf6f01 authored by Taddeüs Kroes's avatar Taddeüs Kroes
Browse files

Change spaceship moving animation at correct times during transition animation

parent 01829ee6
No related branches found
No related tags found
No related merge requests found
......@@ -46,7 +46,10 @@ warp = ->
# first stretch stars to create accelerating feel
Velocity star_tails,
{width: '500px'},
{duration: 1000, easing: 'ease-in'}
{
duration: 1000, easing: 'ease-in',
complete: -> document.body.className = 'excited'
}
# then shift
for tail in star_tails
......@@ -65,18 +68,21 @@ unwarp = ->
for tail, i in star_tails
Velocity tail,
{width: star_heights[i]},
{duration: 1000, easing: 'ease-in'}
{
duration: 1000, easing: 'ease-in',
complete: -> document.body.className = 'cruising'
}
transitions =
cruising_excited: [warp]
excited_cruising: [unwarp]
cruising_excited: warp
excited_cruising: unwarp
set_state = (newstate) ->
oldstate = document.body.className
if oldstate != newstate
console.log 'set state from', oldstate, 'to', newstate
f() for f in transitions[oldstate + '_' + newstate] ? []
document.body.className = newstate
transitions[oldstate + '_' + newstate]?()
#document.body.className = newstate
if debug
document.addEventListener 'keypress', (e) ->
......
......@@ -86,13 +86,11 @@ img, div {
/* Cruising state */
.cruising {
.spaceship {
animation: cruising-movement @cruising-move-duration linear 0s infinite;
.cruising .spaceship {
animation: cruising-movement @cruising-move-duration linear 0s infinite;
img {
animation: cruising-rotation @cruising-tilt-duration linear 0s infinite alternate;
}
img {
animation: cruising-rotation @cruising-tilt-duration linear 0s infinite alternate;
}
}
......@@ -108,20 +106,12 @@ img, div {
/* Excited state */
.excited {
.spaceship {
animation: excited-movement @excited-move-duration linear 0s infinite;
img {
animation: excited-rotation @excited-tilt-duration linear 0s infinite alternate;
}
}
.excited .spaceship {
animation: excited-movement @excited-move-duration linear 0s infinite;
/*
.bg {
animation: excited-bg-tilt 3s linear 0s infinite alternate;
img {
animation: excited-rotation @excited-tilt-duration linear 0s infinite alternate;
}
*/
}
@keyframes excited-movement {
......@@ -133,8 +123,3 @@ img, div {
from { transform: rotateZ(-@excited-nose-tilt / 2) }
to { transform: rotateZ(@excited-nose-tilt / 2) }
}
@keyframes excited-bg-tilt {
from { transform: rotateZ(0) }
to { transform: rotateZ(70deg) }
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment