<app-modal v-if="isShowing">
    ...
  </app-modal>

  <app-modal v-if="isShowing">
    ...
  </app-modal>

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.25s ease-out;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

<div :class="[isShowing ? blurClass : '', bkClass]">
  <h3>Let's trigger this here modal!</h3>
  <button @click="toggleShow">
    <span v-if="isShowing">Hide child</span>
    <span v-else>Show child</span>
  </button>
</div>

.bk {
  transition: all 0.05s ease-out;
}

.blur {
  filter: blur(2px);
  opacity: 0.4;
}

new Vue({
  el: '#app',
  data() {
    return {
      x: 0, 
      y: 0
    }
  },
  methods: {
    coords(e) {
      this.x = e.clientX / 10;
      this.y = e.clientY / 10;
    },
  }
})

<transition name="flip" mode="out-in">
  <slot v-if="!isShowing"></slot>
  <img v-else src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/cartoonvideo14.jpeg" />
</transition>

  <transition
    enter-active-class="bouncein"
    leave-active-class="rollout">
    <div v-if="isShowing">
      <app-child class="child"></app-child>
    </div>
  </transition>

@mixin ballb($yaxis: 0) {
  transform: translate3d(0, $yaxis, 0);
}

@keyframes bouncein { 
  1% { @include ballb(-400px); }
  20%, 40%, 60%, 80%, 95%, 99%, 100% { @include ballb() }
  30% { @include ballb(-80px); }
  50% { @include ballb(-40px); }
  70% { @include ballb(-30px); }
  90% { @include ballb(-15px); }
  97% { @include ballb(-10px); }
}

.bouncein { 
  animation: bouncein 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.ballmove-enter {
  @include ballb(-400px);
}

<transition 
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"

  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
  :css="false">
 
 </transition>

<transition 
  @enter="enterEl"
  @leave="leaveEl"
  :css="false">
  <!-- put element here-->
 </transition>

methods: {
   enterEl(el, done) {
     //entrance animation
     done();
  },
  leaveEl(el, done) {
    //exit animation
    done();
  },
}

<transition @before-enter="beforeEnter" @enter="enter" :css="false">
  <p class="booktext" v-if="load">
    {{ message }}
  </p>
</transition>

new Vue({
  ...
  methods: {
    beforeEnter(el) {
      TweenMax.set(el, {
        transformPerspective: 600,
        perspective: 300,
        transformStyle: "preserve-3d",
        autoAlpha: 1
      });
    },
    enter(el, done) {
      tl.add("drop");
      for (var i = 0; i < wordCount; i++) {
        tl.from(split.words[i], 1.5, {
          z: Math.floor(Math.random() * (1 + 150 - -150) + -150),
          ease: Bounce.easeOut
        }, "drop+=0." + (i/ 0.5));
       ...
    }
  }
});

 <transition-group name="cell" tag="div" class="container">
    <div v-for="cell in cells" :key="cell.id">
      {{ cell.number }}
    </div>
  </transition-group>

 <input 
    class="slider" 
    id="pricerange" 
    type="range"
    :value="pricerange"  
    :min="min" 
    :max="max" 
    step="0.1" 
    @input="$emit('update:pricerange', $event.target.value)"
  />

<transition-group name="items" tag="section" class="content">
    <app-item
      v-for="(item, index) in products"
      :key="item"
      :item="item"
      :index="index"
    />
</transition-group>

/* --- items animation --- */

.items-leave-active {
  transition: all 0.2s ease-in;
}

.items-move {
  transition: all 0.2s ease-in-out;
}

.items-enter-active {
  transition: all 0.2s ease-out;
}

.items-enter,
.items-leave-to {
  opacity: 0;
  transform: scale(0.9);
  transform-origin: 50% 50%;
}

<!--xaxis -->
<g targetVal="targetVal"  class="xaxis">
  <line x1="0" y1="1" x2="350" y2="1"/>
  <g v-for="(select, index) in targetVal">
    <line y1="0" y2="7" v-bind="{ 'x1':index*10, 'x2':index*10 }"/>
    <text v-if="index % 5 === 0" v-bind="{ 'x':index*10, 'y':20 }">{{ index }}</text>
  </g>
</g>

watch: {
    selected: function(newValue, oldValue) {

      var tweenedData = {}      

      var update = function() {
        let obj = Object.values(tweenedData);
        obj.pop();
        this.targetVal = obj;
      }

      var tweenSourceData = { onUpdate: update, onUpdateScope: this}

      for (let i = 0; i < oldValue.length; i++) {
        let key = i.toString()
        tweenedData[key] = oldValue[i]
        tweenSourceData[key] = newValue[i]
      }

      TweenMax.to(tweenedData, 1, tweenSourceData)
    }
  }

 watch: {
    checked() { 
      let period = this.timeVal.slice(-2),
          hr = this.timeVal.slice(0, this.timeVal.indexOf(":"));
      
      const dayhr = 12,
            rpos  = 115,
            rneg  = -118;
      
      if ((period === 'AM' && hr != 12) || (period === 'PM' && hr == 12)) {
        this.spin(`${rneg - (rneg/dayhr) * hr}`)
        this.animTime(1-hr/dayhr, period)
      } else {
        this.spin(`${(rpos/dayhr) * hr}`)
        this.animTime(hr/dayhr, period)
      }
      
    }
  },

methods: {
    // this formats the hour info without a library
    getCurrentHour(zone) {
      let newhr = new Date().toLocaleTimeString('en', {
        hour: '2-digit', 
        minute: '2-digit', 
        hour12: true, 
        timeZone: zone
      })
      return newhr
    },
  ...
}

bounceBall() {   
  this.vy += this.g; // gravity increases the vertical speed
  this.x1 += this.vx; // horizontal speed inccrements horizontal position 
  this.y1 += this.vy; // vertical speed increases vertical position

  if (this.y1 > this.total - this.radius) { // if ball hits the ground
    this.y1 = this.total - this.radius; // reposition it at the ground
    this.vy *= -0.8; // then reverse and reduce its speed
  }
},
animateBall() {
  ...
  function step(timestamp) {
    if (!start) start = timestamp;
    var progress = timestamp - start;
    if (progress < 13000) {
      vueThis.bounceBall();
      vueThis.req = window.requestAnimationFrame(step);
    } else {
      vueThis.x1 = this.radius;
      vueThis.y1 = this.radius;
      vueThis.running = false;
    }
  }
  this.req = window.requestAnimationFrame(step);
},
cancelAnimate() {
  cancelAnimationFrame(this.req);
  this.running = false;
  ...
}

<div id="app" @mousemove="coordinates">

coordinates(e) {
  const audio = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/Whoa.mp3'),
    walleBox = document.getElementById('walle').getBoundingClientRect(),
    walleCoords = walleBox.width / 2 + walleBox.left;
    ...

    TweenMax.set("#eyes", {
      scaleX: 1 + (1 - e.clientX / walleCoords) / 5
    });
    TweenMax.set("#walle", {
      x: ((e.clientX / walleCoords) * 50) - 40
    });

    this.startArms.progress(1 - (e.clientX / walleCoords)).pause();
  }
},

<transition @leave="leaveDialog" :css="false">
  <app-dialog v-if="showWeather"></app-dialog>
</transition>
<transition @leave="leaveDroparea" :css="false">
  <g v-if="showWeather">
    <app-droparea v-if="template == 1"></app-droparea>
    <app-windarea v-else-if="template == 2"></app-windarea>
    <app-rainbowarea v-else-if="template == 3"></app-rainbowarea>
    <app-tornadoarea v-else></app-tornadoarea>
  </g>
</transition>

export default {
  computed: {
    template() {
      return this.$store.state.template;
    }
  },
  methods: {
    toggle() {
      this.$store.commit('toggle');
    }
  },
  mounted() {
    //enter weather
    const tl = new TimelineMax();
    tl.add("enter");
    tl.fromTo("#dialog", 2, {
      opacity: 0
    }, {
      opacity: 1
    }, "enter");
    tl.fromTo("#dialog", 2, {
      rotation: -4
    }, {
      rotation: 0,
      transformOrigin: "50% 100%",
      ease: Elastic.easeOut
    }, "enter");
  }
}

<p v-tack>I will now be tacked onto the page</p>

<div id="app">
  <p>Scroll down the page</p>
  <p v-tack="70">Stick me 70px from the top of the page</p>
</div>

<p v-tack="{ top: '40', left: '100' }">Stick me 40px from the top of the
page and 100px from the left of the page</p>

Vue.directive('scroll', {
  inserted: function(el, binding) {
    let f = function(evt) {
      if (binding.value(evt, el)) {
        window.removeEventListener('scroll', f);
      }
    };
    window.addEventListener('scroll', f);
  },
});

// main app
new Vue({
  el: '#app',
  methods: {
   handleScroll: function(evt, el) {
    if (window.scrollY > 50) {
      TweenMax.to(el, 1.5, {
        y: -10,
        opacity: 1,
        ease: Sine.easeOut
      })
    }
    return window.scrollY > 100;
    }
  }
});

<div class="box" v-scroll="handleScroll">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque amet harum aut ab veritatis earum porro praesentium ut corporis. Quasi provident dolorem officia iure fugiat, eius mollitia sequi quisquam.</p>
</div>

<div class="box accelerate impact" v-dscroll="totalImpact">
  <h3>Total Impact</h3>
  <p>Most alksdjflkjasd laksdjfl;kasjdf laksd falksdjf lsdj f</p>
</div>

<nuxt-link to="/product">Product</nuxt link>

.page-enter-active, .page-leave-active {
  transition: all .25s ease-out;
}
.page-enter, .page-leave-active {
  opacity: 0;
  transform: scale(0.95);
  transform-origin: 50% 50%;
}

.page-enter-active {
  animation: acrossIn .45s ease-out both;
} 
 
.page-leave-active {
  animation: acrossOut .65s ease-in both;
} 

export default {
  transition: {
    mode: 'out-in',
    css: false,
    enter (el, done) {

      let tl = new TimelineMax({ onComplete: done }),
          spt = new SplitText('h1', {type: 'chars' }), 
          chars = spt.chars;

      TweenMax.set(chars, {
        transformPerspective: 600,
        perspective: 300,
        transformStyle: 'preserve-3d'
      })

      tl.add('start')
      tl.from(el, 0.8, {
        scale: 0.9,
        transformOrigin: '50% 50%',
        ease: Sine.easeOut
      }, 'start')
      ...
      tl.timeScale(1.5)
    }
  ...

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: {
      page: 'index'
    },
    mutations: {
      updatePage(state, pageName) {
        state.page = pageName
      }
    }
  })
}

export default createStore

export default function(context) {
  // go tell the store to update the page
  context.store.commit('updatePage', context.route.name)
}

module.exports = {
  ...
  router: {
    middleware: 'pages'
  },
  ...
}

<template>
  <div>
    <app-navigation />
    <nuxt/>
  </div>
</template>

//animations
.place {
  .follow {
    transform: translate3d(-215px, -80px, 0);
  }
  .profile-photo {
    transform: translate3d(-20px, -100px, 0) scale(0.75);
  }
  .profile-name {
    transform: translate3d(140px, -125px, 0) scale(0.75);
    color: white;
  }
  .side-icon {
    transform: translate3d(0, -40px, 0);
    background: rgba(255, 255, 255, 0.9);
  }
  .calendar {
    opacity: 1;
  }
}

.items,
.list-move {
  transition: all 0.4s ease;
}

.active {
  .rect {
    transform: translate3d(0, 30px, 0);
  }
  ...
}

<transition-group name="layout" tag="g">
  <rect class="items rect" ref="rect" key="rect" width="171" height="171"/>
  ...
</transition-group>

getGeo(makeIterator(content), (updatedContent, err) => {
  if (!err) {
    // we need to base64 encode the JSON to embed it into the PUT (dear god, why)
    let updatedContentB64 = new Buffer(
      JSON.stringify(updatedContent, null, 2)
    ).toString('base64');
    let pushData = {
      path: GH_FILE,
      message: 'Looked up locations, beep boop.',
      content: updatedContentB64,
      sha: data.sha
    };
    ...
};

function getGeo(itr, cb) {
 let curr = itr.next();
 if (curr.done) {
   // All done processing- pass the (now-populated) entries to the next callback
   cb(curr.data);
   return;
 }

 let location = curr.value.Location;

<div id="container"></div>

mounted() {
  //we have to load the texture when it's mounted and pass it in
  let earthmap = THREE.ImageUtils.loadTexture('/world7.jpg');
  this.initGlobe(earthmap);
}

//from
const geometry = new THREE.SphereGeometry(200, 40, 30);
//to 
const geometry = new THREE.IcosahedronGeometry(200, 0);