Seconds
Duration
vendors
	-moz-
	-webkit-
	-o-
	none

⧪

{{ seconds / duration * 100| number:0}}% { {{ vendors }}transform: translateX({{ rangex }}px) translateY({{ rangey }}px) RotateY({{ rotatey }}deg) RotateZ({{ rotate }}deg) scaleY({{ Scaley *0.1| number:1 }}) scaleX({{ Scalex *0.1| number:2 }}); opacity:{{ opacity *.1 | number:2}};} /* {{ seconds }}s */

X		{{ rangex }}
Y		{{ rangey }}
RotateZ		{{ rotate }}
RotateY		{{ rotatey }}
Scalex		{{ Scalex/10 }}
ScaleY		{{ Scaley/10 }}
Opacity		{{ opacity*1.0 }}0%

Modal -

In head

In Clickable {{ class }} Div

data-toggle="modal" data-target="#{{ class }}drop"

Before Closing html

<div class="modal fade" id="{{ class }}drop" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<p>When they click on {{ class }} div, this is what they will see!</p>
</div>
</div>
</div>

In CSS

Modal

Explaination -

Option Description

id A unique reference for the animation
delay Specifies a delay before the animation begins. Corresponds to the animation-delay CSS property

duration Specifies the amount of time it should take for one cycle. Corresponds to the animation-duration CSS property

iterations Specifies how many times to run a cycle of the animation. Corresponds to the animation-iteration-count CSS property

direction Specifies in which direction to run through the animation timeline. Corresponds to the animation-direction CSS property

easing Specifies how the animation transitions between steps. Corresponds to the animation-timing-function CSS property

fill Specifies the values applied to the element and the start and end of the animation. Corresponds to the animation-fill-mode CSS property

endDelay Specifies an amount of time to delay after the end of the animation
iterationStart Specifies the point n the iteration the animation should start

Explaination

Interactive -

<button class="Stop moosebutt" value="Stop">Stop</button>
<button class="Start moosebutt" value="Start">Start</button>

$(document).ready(function(){
  $(".Start").click(function(){
      $(".{{ class }}").addClass("running");
  });
});
</script>

Interactive

Setup Wizard -

Root Folder
Class
animation-name:
animation-duration:
animation-iteration-count:
animation-delay:
animation-play-state:
animation-fill-mode:
animation-direction:
animation-timing-function:
Bex

.{{ class }}{
-webkit-animation-name:{{ animation }};
-moz-animation-name:{{ animation }};
-o-animation-name:{{ animation }};
animation-name:{{ animation }};
animation-duration: {{data.animationduration }}ms;
animation-iteration-count:{{data.animationiterationcount }};
animation-delay: {{data.animationdelay }}ms;
animation-fill-mode: {{data.animationfillmode }};
animation-play-state:{{data.animationplaystate }};
animation-direction:{{data.animationdirection }} ;
animation-timing-function:{{data.animationtimingfunction }};
opacity:0;
position:absolute;
z-index:0;
}

Setup Wizard

Starter Code - ➕

New CSS New Actor Div

<style>

@-moz-keyframes {{ animation }} {
-moz--moz--moz--moz--moz--moz--moz--moz--moz--moz--moz--moz-

}

@-webkit-keyframes {{ animation }} {
-webkit--webkit--webkit--webkit--webkit--webkit--webkit--webkit-

}

@-o-keyframes {{ animation }} {
-o--o--o--o--o--o--o--o--o--o--o--o--o--o--o--o--o--o--o--o-

}

@-moz--webkit--o-keyframes {{ animation }} {

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

}

</style>

<div style="background-image:url({{ bgimage }});Background-color:#fff;height:{{ bannerheight }}px;width:{{ bannerwidth }}px;overflow:hidden;position:relative;">

</div>

Starter Code

Preview -

Refresh

⧪

cursor:pointer;
cursor:hand;

Preview

Images -

Banner Width

Banner Height

Banner Image

Actor Image

Image Width

Image Height

Images

	mp3
	mp3
	mp3
	mp3
	mp3
	mp3
	mp3
	mp3
	mp3
	mp3

Sound - ➕

var {{ Sound01 }}=MooseSound("{{ GURL }}/{{ Sound01 }}.mp3")
var {{ Sound02 }}=MooseSound("{{ GURL }}/{{ Sound02 }}.mp3")
var {{ Sound03 }}=MooseSound("{{ GURL }}/{{ Sound03 }}.mp3")
var {{ Sound04 }}=MooseSound("{{ GURL }}/{{ Sound04 }}.mp3")
var {{ Sound05 }}=MooseSound("{{ GURL }}/{{ Sound05 }}.mp3")
var {{ Sound06 }}=MooseSound("{{ GURL }}/{{ Sound06 }}.mp3")
var {{ Sound07 }}=MooseSound("{{ GURL }}/{{ Sound07 }}.mp3")
var {{ Sound08 }}=MooseSound("{{ GURL }}/{{ Sound08 }}.mp3")
var {{ Sound09 }}=MooseSound("{{ GURL }}/{{ Sound09 }}.mp3")
var {{ Sound10 }}=MooseSound("{{ GURL }}/{{ Sound10 }}.mp3")
</script>

onmouseover="{{ Sound01 }}.playclip()"
onmouseover="{{ Sound02 }}.playclip()"
onmouseover="{{ Sound03 }}.playclip()"
onmouseover="{{ Sound04 }}.playclip()"
onmouseover="{{ Sound05 }}.playclip()"
onmouseover="{{ Sound06 }}.playclip()"
onmouseover="{{ Sound07 }}.playclip()"
onmouseover="{{ Sound08 }}.playclip()"
onmouseover="{{ Sound09 }}.playclip()"
onmouseover="{{ Sound10 }}.playclip()"

Sound

Sprite -

Div Class

Animation Width

Animation Height

Sprite Graphic File

Speed

Number of Frames

Width of Sprite Graphic

Repititions

Sprite Animation Wizard
<style>
.{{ Classa }} {
width: {{ width }}px;
height: {{ height }}px;
background: url('{{ graphic }}') left center;
animation: {{ Classa }} {{ Speed }}s steps({{ steps }}) {{ repetitions }};
background-repeat:no-repeat;
}
@keyframes {{ Classa }} {
100% { background-position: -{{ graphicwidth }}px; }
}
</style>

<div class="{{ Classa }}"></div>

<div style="height:{{ height }}px;width:{{ width }}px;position:absolute;" class="{{ class }}"> <div class="{{ Classa }}"></div></div>