Menu icon Foundation
Motion UI: Can I set a start position for animation?

Hi,

I have a lovely panel for advanced search options that I want to have slide in when a user clicks the "Advanced Search" link. It works just fine except that the animation start position seems to be at the top of the div containing the link. I would prefer the animation to start at the bottom of the div containing the link.

Is it possible to achieve this? 

Here is the HTML:

    <div class="row">

      <div class="small-12 medium-2 columns">
        <a href="new-oss-request.html" class="button primary raised">New Request</a>
      </div>

      <div class="small-12 medium-4 columns">
        <div class="input-group">
          <input class="input-group-field" type="text" placeholder="Requester: Jane Doe">
          <div class="input-group-button">
            <input type="submit" class="button" value="Search">
          </div>
        </div>
      </div>

      <div class="small-12 medium-2 columns">
        <p class="inline-block"><a data-toggle="advanced-search">Advanced Search <span class="ui-icon-tiny ui-icon-caret-d primary"></span></a></p>      
      </div>

      <div class="small-12 medium-3 columns">
        <p class="text-right">1 &ndash; 10 of 137</p>
      </div>

      <div class="small-12 medium-1 columns">
        <select name="" id="">
          <option value="">10</option>
          <option value="">25</option>
          <option value="">50</option>
          <option value="">All</option>
        </select>
      </div>

    </div><!--end row-->

    <div class="callout no-show" id="advanced-search" data-toggler data-animate="slide-in-down slide-out-up" data-closable>
      <h2>Advanced Search</h2>
      <button class="close-button" data-close>&times;</button>
    </div>

 

Motion UI

Hi,

I have a lovely panel for advanced search options that I want to have slide in when a user clicks the "Advanced Search" link. It works just fine except that the animation start position seems to be at the top of the div containing the link. I would prefer the animation to start at the bottom of the div containing the link.

Is it possible to achieve this? 

Here is the HTML:

    <div class="row">

      <div class="small-12 medium-2 columns">
        <a href="new-oss-request.html" class="button primary raised">New Request</a>
      </div>

      <div class="small-12 medium-4 columns">
        <div class="input-group">
          <input class="input-group-field" type="text" placeholder="Requester: Jane Doe">
          <div class="input-group-button">
            <input type="submit" class="button" value="Search">
          </div>
        </div>
      </div>

      <div class="small-12 medium-2 columns">
        <p class="inline-block"><a data-toggle="advanced-search">Advanced Search <span class="ui-icon-tiny ui-icon-caret-d primary"></span></a></p>      
      </div>

      <div class="small-12 medium-3 columns">
        <p class="text-right">1 &ndash; 10 of 137</p>
      </div>

      <div class="small-12 medium-1 columns">
        <select name="" id="">
          <option value="">10</option>
          <option value="">25</option>
          <option value="">50</option>
          <option value="">All</option>
        </select>
      </div>

    </div><!--end row-->

    <div class="callout no-show" id="advanced-search" data-toggler data-animate="slide-in-down slide-out-up" data-closable>
      <h2>Advanced Search</h2>
      <button class="close-button" data-close>&times;</button>
    </div>

 

Rafi Benkual almost 3 years ago

Cool UI! You can change the animation classes to do this - example: http://codepen.io/rafibomb/pen/zoOPRV?editors=1100

You can find all the classes here:

https://github.com/zurb/motion-ui/blob/master/docs/classes.md

What type of site/app are you building?

Val Ery almost 3 years ago

Hi!
Sorry, that is being implemented in your dialogue ...


Rafi! Thanks for the link to the class description. Very useful.


On the subject...
I really liked the example provided by Kevin Ball (toggler-plugin) - http://codepen.io/kball/pen/PGERRN/
And my example (still not done completely). Here the animation is added on the button "Read more" (however, I used the classes hinge-in-from-top hinge-out-from-top) - http://codepen.io/Val_Ery/pen/ozmqGQ

Janet Tingey almost 3 years ago

Thank you, Rafi and Val! Those examples are very helpful.

Rafi, the application is one that will be used in a software development workflow in which developers request legal approval for open source code included in their applications.