<commit_before><h1>Animations</h1>

<div class="intro">
  EmberUI animations are powered by velocity.js which makes them flexible and blazingly fast.
</div>

<p>
  Some components make use of <a href="velocityjs.org">velocity.js</a> for speedy animations. Right now the <em>dropbutton</em>, <em>select</em>,  <em>selectdate</em>, and <em>modal</em> components currently support velocity animations.
</p>

<p>
  Which animation is used is chosen based on the <em>animationStyle</em> and <em>style</em> properties. If you do not specify an <em>animationStyle</em> it will use the <em>style</em> name instead.
</p>

<pre>\{{eui-selectdate placeholder="Select a date" animationStyle="zoom" style="default"}}</pre>


<h2>Naming Conventions</h2>

<p>
  If you wish to create a custom animation the best starting point is to look at the <a href="https://github.com/emberui/emberui/tree/master/lib/animations">exising animations</a> and build off of them. To create a custom animation you need to follow this naming convention: <em>ComponentActionStyle</em> For each section of the naming convention you may choose from the following lists:
</p>

<h3>Components</h3>
<ul>
  <li><strong>euiModal</strong></li>
  <li>
    <strong>euiPoplist</strong>
    <p>
      This is the window that pops up with a list of options. It is used by the <em>dropbutton</em> and <em>select</em> components.
    </p>
  </li>
  <li>
    <strong>euiPopcal</strong>
    <p>This is the calendar popup.</p>
  </li>
</ul>

<h3>Actions</h3>
<p>
  There are currently animations for two different actions.
</p>
<ul>
  <li><strong>Open</strong></li>
  <li><strong>Close</strong></li>
</ul>

<h3>Styles</h3>
<p>
  Styles can be anything you want, but it probably makes most sense if you name if after your CSS styles that you created. Then you also don't need to specify the <em>animationStyle</em> property since it will fall back to the <em>style</em> property.
</p>

<pre>\{{eui-selectdate style="zoom"}}</pre>

<p>
  This will look for an animation by the name of <em>euiSelectdateOpenZoom</em> and <em>euiSelectdateCloseZoom</em> and use those. If an animation does not exist it will be ignored. You do not need to create animations for each action, but it is recommended.
</p>


<h2>Creating Animations</h2>

<p>
  Use the documentation for <a href="velocityjs.org">velocity.js</a> and <a href="https://api.jquery.com/animate/">jQuery Animate</a> to create your animations.
</p>
<p>
  The <em>element</em> will be set to the component you are animating. Here is an example of a closing animation for the modal where the modal and the overlay are animated seperately.
</p>

<pre>$.velocity.Sequences.euiModalCloseFull = function(element, options) {
  var calls;
  calls = [<commit_msg>add mention of target to docs<commit_after><h1>Animations</h1>

<div class="intro">
  EmberUI animations are powered by velocity.js which makes them flexible and blazingly fast.
</div>

<p>
  Some components make use of <a href="velocityjs.org">velocity.js</a> for speedy animations. Right now the <em>dropbutton</em>, <em>select</em>,  <em>selectdate</em>, and <em>modal</em> components currently support velocity animations.
</p>

<p>
  Which animation is used is chosen based on the <em>animationStyle</em> and <em>style</em> properties. If you do not specify an <em>animationStyle</em> it will use the <em>style</em> name instead.
</p>

<pre>\{{eui-selectdate placeholder="Select a date" animationStyle="zoom" style="default"}}</pre>


<h2>Naming Conventions</h2>

<p>
  If you wish to create a custom animation the best starting point is to look at the <a href="https://github.com/emberui/emberui/tree/master/lib/animations">exising animations</a> and build off of them. To create a custom animation you need to follow this naming convention: <em>ComponentActionStyle</em> For each section of the naming convention you may choose from the following lists:
</p>

<h3>Components</h3>
<ul>
  <li><strong>euiModal</strong></li>
  <li>
    <strong>euiPoplist</strong>
    <p>
      This is the window that pops up with a list of options. It is used by the <em>dropbutton</em> and <em>select</em> components.
    </p>
  </li>
  <li>
    <strong>euiPopcal</strong>
    <p>This is the calendar popup.</p>
  </li>
</ul>

<h3>Actions</h3>
<p>
  There are currently animations for two different actions.
</p>
<ul>
  <li><strong>Open</strong></li>
  <li><strong>Close</strong></li>
</ul>

<h3>Styles</h3>
<p>
  Styles can be anything you want, but it probably makes most sense if you name if after your CSS styles that you created. Then you also don't need to specify the <em>animationStyle</em> property since it will fall back to the <em>style</em> property.
</p>

<pre>\{{eui-selectdate style="zoom"}}</pre>

<p>
  This will look for an animation by the name of <em>euiSelectdateOpenZoom</em> and <em>euiSelectdateCloseZoom</em> and use those. If an animation does not exist it will be ignored. You do not need to create animations for each action, but it is recommended.
</p>


<h2>Creating Animations</h2>

<p>
  Use the documentation for <a href="velocityjs.org">velocity.js</a> and <a href="https://api.jquery.com/animate/">jQuery Animate</a> to create your animations.
</p>
<p>
  The <em>element</em> will be set to the component you are animating. Here is an example of a closing animation for the modal where the modal and the overlay are animated seperately. You may also have access to a <em>target</em> object which is the element that originally launched the popup. 
</p>

<pre>$.velocity.Sequences.euiModalCloseFull = function(element, options) {
  var calls;
  calls = [
{'fraction_non_alphanumeric': 0.12857396554786005, 'fraction_numerical': 0.004262120404901438, 'mean_word_length': 4.379178605539637, 'pattern_counts': {'":': 0, '<': 211, '<?xml version=': 0, '>': 211, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '240434', 'n_tokens_mistral': 1832, 'n_tokens_neox': 1780, 'n_words': 687}