u animate

Coming Soon

---

1. on-**-complete

Directives to Trigger Animations (using u-animate, u-anim)

---

1. anim-first-enter-down,

with args [parent, child, class, delay]

2. anim-enter-up, anim-enter-down,

with args [parent, child, class, delay]

3. anim-exit-up, anim-exit-down,

with args [parent, child, class, delay]

4. anim-on-show [for CTAs, sidebar]

with args [parent, child, class, delay]

Directives to Declare Scroll Points (using Waypoints, wp)

---

Summary

1. init-wp-parent

2. init-wp, init-wp-offset

3. bind-wp, bind-wp-classes, bind-wp-direction

---

##### 1. Initializing a Scroll Point with Offset = 0
Adding ```init-wp``` to any HTML tag

<section id='splash-university' init-wp='university'>

• Automatically binds $scope.page.waypoints.university to the page controller for that particular view
• Anytime the user scrolls past <section id='splash-university'>, the page scope variable $scope.page.waypoints.university will be set to true

##### 2. Initializing Scroll Point with an Custom Offset

Part 1: Positive/Negative Absolute

• Initializing a positive absolute pixel value

   ```
  <!--Positive offset example-->
  <section id='splash-university' init-wp='university' wp-offset="106">
  ```
  * Automatically binds ```$scope.page.waypoints.university```
  * When the user is 106 pixels **FROM (above)** ```<section id='splash-university'>```, the page scope variable ```$scope.page.waypoints.university``` will be set to true
  

• Initializing a negative absolute pixel value

  <!--Negative offset example-->
  <section id='splash-university' init-wp='university' wp-offset="-106">
  

   * Automatically binds ```$scope.page.waypoints.university```
   * When the user is 106 pixels **ALREADY INTO (below)** ```<section id='splash-university'>```, the page scope variable ```$scope.page.waypoints.university``` will be set to true
  

Part 2: Positive/Negative Percentage

• Initializing a positive

  ```
  <section id='splash-university' init-wp='university' wp-offset="50%">
  ```
   
   * Automatically binds ```$scope.page.waypoints.university```
   * When the user has scrolled 50% **FROM (below)** ```<section id='splash-university'>```, the page scope variable ```$scope.page.waypoints.university``` will be set to true
  

• Initializing a negative percentage value

  <!--Negative offset example-->
  <section id='splash-university' init-wp='university' wp-offset="-50%">
  

   * Automatically binds ```$scope.page.waypoints.university```
   * When the user has scrolled 50% **INTO (below)** ```<section id='splash-university'>```, the page scope variable ```$scope.page.waypoints.university``` will be set to true
  

**Part 3:** Initialize multiple waypoints with multiple offsets **

<!--example-->
<section init-wp="hiw, hiw_enter, hiw_enter2" wp-offset="106, 40%, 20%" 
class='splash-categories' id='splash-browse'>

Part 4: Toggling (add/remove) classes through WP **

<!-- Adds bg-charcoal everytime university is active in the downward direction.
     This means that university is set to FALSE when goingupwards -->

<header bind-wp="university" bind-wp-class="bg-charcoal" bind-wp-direction="down">

Known Bugs

• Declaring three init-wp on the same element, with children that animate depending on different offsets, when one of the init-wp objects has a firstTimeEnter