adding latest

firebase.md

@@ -758,6 +758,13 @@ background-image: linear-gradient( 109.6deg, rgba(113,14,51,0.83) 15.2%, rgba(21
 
 ## Animations
 
+Vue Animations: <https://css-tricks.com/intro-to-vue-5-animations/>
+
+### transitions
+
+You can use Animista css animations with Vue's transition element:
+<https://serversideup.net/animista-css-with-vuejs-transitions/>
+
 ### Router Animations
 
 <https://github.com/Orlandster/vue-page-transition>
@@ -815,6 +822,57 @@ You can then in any component add any of the animations from the documentation:
 To use with nuxt install as a plugin:
 <https://www.yasminzy.com/nuxt/aos.html#steps>
 
+#### Custom animations with AOS library
+
+Custom Cubic-bezier easings: <https://cubic-bezier.com>
+Custom easings: <https://easings.net/en>
+
+You can use custom animations with the AOS library. For example, we can use Animista.
+
+The base template is:
+
+```scss
+[data-aos="test-roll"] {
+  // initial here
+  transition-property: transform, opacity, filter;
+  &.aos-animate {
+    // final here
+  }
+}
+```
+
+In Animista you should copy the keyframes. Take the 0% content and put it as the intitial content in the above template.
+
+The the 100% content and place it in the final content in the above template.
+
+You need to update the `transition-property` with the elements you are animating from one state to another.
+
+Using custom easings is straightforward.
+
+Create the scss:
+
+```scss
+[data-aos] {
+  body[data-aos-easing="new-easing"] &,
+  &[data-aos][data-aos-easing="new-easing"] {
+    transition-timing-function: cubic-bezier(0.25, 1, 0.57, 0.55);
+  }
+}
+```
+
+Then apply in the html:
+
+```html
+<v-card
+  flat
+  color="rgb(0, 0, 0, 0)"
+  class="d-flex align-center justify-center flex-column pa-6"
+  data-aos="test-roll"
+  data-aos-duration="3000"
+  data-aos-easing="new-easing"
+></v-card>
+```
+
 ## Alternative to fill-height
 
 Using `fill-height` prop on a `<v-container>` can result in a bug where the width of the container doesn't reach all the way to the right hand side.
@@ -834,6 +892,35 @@ set a default which applies to all, set the one you want to apply for upwards
 
 document setting a default cols (check this with triangle)
 
+## Dynamic Mobile Layouts
+
+### Cols
+
+<!-- TODO Screenshot of firebase tutorial login page -->
+
+You can control how items are rendered based on the viewport width. For example, you can have a page appear across 2 columns on desktop, but display a single column on mobile : <http://localhost:8080/triangle>
+
+One way is to use the the viewport cols props for `<v-col>`:
+
+```html
+<v-col
+  sm="6"
+  cols="12"
+  align-self="stretch"
+  class="d-flex justify-sm-end justify-center pb-10 pb-sm-0 pr-sm-10"
+></v-col>
+```
+
+This will set a default of 12, and then use 6 on sm and anything above it.
+
+You can find all props for the dynamic cols in <https://vuetifyjs.com/en/components/grids/#api>
+
+If you set a row to use more than 12 columns, it will overfill on to the next line.
+
+<!-- TODO Document using align-sm-end for responsive content layouts -->
+
+<!-- ? should this be merged with the previous section on mobile layouts?  -->
+
 ## CSS Spacing
 
 <https://vuetifyjs.com/en/styles/spacing/>